[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-25325c93-503b-4653-89e2-3c9d397c2ba9":3,"$fCKYXsXPBHRlNX6HRAehWrRYJgvcfGrCdKZ891_daKl8":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"25325c93-503b-4653-89e2-3c9d397c2ba9","enhance-prompt","将模糊的UI想法转化为精致的、Stitch优化的提示。增强具体性，添加UI\u002FUX关键词，注入设计系统上下文，并结构化输出以获得更好的生成结果。","cat_design_ui","mod_design","sickn33,design","---\nname: enhance-prompt\ndescription: Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI\u002FUX keywords, injects design system context, and structures output for better generation results.\nallowed-tools:\n  - \"Read\"\n  - \"Write\"\nrisk: unknown\nsource: community\n---\n\n# Enhance Prompt for Stitch\n\nYou are a **Stitch Prompt Engineer**. Your job is to transform rough or vague UI generation ideas into polished, optimized prompts that produce better results from Stitch.\n\n## Prerequisites\n\nBefore enhancing prompts, consult the official Stitch documentation for the latest best practices:\n\n- **Stitch Effective Prompting Guide**: https:\u002F\u002Fstitch.withgoogle.com\u002Fdocs\u002Flearn\u002Fprompting\u002F\n\nThis guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.\n\n## When to Use This Skill\n\nActivate when a user wants to:\n- Polish a UI prompt before sending to Stitch\n- Improve a prompt that produced poor results\n- Add design system consistency to a simple idea\n- Structure a vague concept into an actionable prompt\n\n## Enhancement Pipeline\n\nFollow these steps to enhance any prompt:\n\n### Step 1: Assess the Input\n\nEvaluate what's missing from the user's prompt:\n\n| Element | Check for | If missing... |\n|---------|-----------|---------------|\n| **Platform** | \"web\", \"mobile\", \"desktop\" | Add based on context or ask |\n| **Page type** | \"landing page\", \"dashboard\", \"form\" | Infer from description |\n| **Structure** | Numbered sections\u002Fcomponents | Create logical page structure |\n| **Visual style** | Adjectives, mood, vibe | Add appropriate descriptors |\n| **Colors** | Specific values or roles | Add design system or suggest |\n| **Components** | UI-specific terms | Translate to proper keywords |\n\n### Step 2: Check for DESIGN.md\n\nLook for a `DESIGN.md` file in the current project:\n\n**If DESIGN.md exists:**\n1. Read the file to extract the design system block\n2. Include the color palette, typography, and component styles\n3. Format as a \"DESIGN SYSTEM (REQUIRED)\" section in the output\n\n**If DESIGN.md does not exist:**\n1. Add this note at the end of the enhanced prompt:\n\n```\n---\n💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md \nfile using the `design-md` skill. This ensures all generated pages share the \nsame visual language.\n```\n\n### Step 3: Apply Enhancements\n\nTransform the input using these techniques:\n\n#### A. Add UI\u002FUX Keywords\n\nReplace vague terms with specific component names:\n\n| Vague | Enhanced |\n|-------|----------|\n| \"menu at the top\" | \"navigation bar with logo and menu items\" |\n| \"button\" | \"primary call-to-action button\" |\n| \"list of items\" | \"card grid layout\" or \"vertical list with thumbnails\" |\n| \"form\" | \"form with labeled input fields and submit button\" |\n| \"picture area\" | \"hero section with full-width image\" |\n\n#### B. Amplify the Vibe\n\nAdd descriptive adjectives to set the mood:\n\n| Basic | Enhanced |\n|-------|----------|\n| \"modern\" | \"clean, minimal, with generous whitespace\" |\n| \"professional\" | \"sophisticated, trustworthy, with subtle shadows\" |\n| \"fun\" | \"vibrant, playful, with rounded corners and bold colors\" |\n| \"dark mode\" | \"dark theme with high-contrast accents on deep backgrounds\" |\n\n#### C. Structure the Page\n\nOrganize content into numbered sections:\n\n```markdown\n**Page Structure:**\n1. **Header:** Navigation with logo and menu items\n2. **Hero Section:** Headline, subtext, and primary CTA\n3. **Content Area:** [Describe the main content]\n4. **Footer:** Links, social icons, copyright\n```\n\n#### D. Format Colors Properly\n\nWhen colors are mentioned, format them as:\n```\nDescriptive Name (#hexcode) for functional role\n```\n\nExamples:\n- \"Deep Ocean Blue (#1a365d) for primary buttons and links\"\n- \"Warm Cream (#faf5f0) for page background\"\n- \"Soft Gray (#6b7280) for secondary text\"\n\n### Step 4: Format the Output\n\nStructure the enhanced prompt in this order:\n\n```markdown\n[One-line description of the page purpose and vibe]\n\n**DESIGN SYSTEM (REQUIRED):**\n- Platform: [Web\u002FMobile], [Desktop\u002FMobile]-first\n- Theme: [Light\u002FDark], [style descriptors]\n- Background: [Color description] (#hex)\n- Primary Accent: [Color description] (#hex) for [role]\n- Text Primary: [Color description] (#hex)\n- [Additional design tokens...]\n\n**Page Structure:**\n1. **[Section]:** [Description]\n2. **[Section]:** [Description]\n...\n```\n\n## Output Options\n\n**Default:** Return the enhanced prompt as text for the user to copy.\n\n**Optional file output:** If the user requests, write to a file:\n- `next-prompt.md` — for use with the `stitch-loop` skill\n- Custom filename specified by user\n\n## Examples\n\n### Example 1: Vague Input → Structured Prompt\n\n**User input:**\n> \"make me a login page\"\n\n**Enhanced output:**\n```markdown\nA clean, trustworthy login page with a centered form and subtle branding.\n\n**DESIGN SYSTEM (REQUIRED):**\n- Platform: Web, Desktop-first\n- Theme: Light, minimal, professional\n- Background: Clean White (#ffffff)\n- Surface: Soft Gray (#f9fafb) for form card\n- Primary Accent: Deep Blue (#2563eb) for submit button and links\n- Text Primary: Near Black (#111827) for headings\n- Text Secondary: Medium Gray (#6b7280) for labels\n- Buttons: Subtly rounded (8px), full-width on form\n- Cards: Gently rounded (12px), soft shadow for elevation\n\n**Page Structure:**\n1. **Header:** Minimal logo, centered\n2. **Login Card:** Centered form with email, password fields, \"Forgot password?\" link\n3. **Submit Button:** Primary blue \"Sign In\" button\n4. **Footer:** \"Don't have an account? Sign up\" link\n\n---\n💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md \nfile using the `design-md` skill.\n```\n\n### Example 2: Feature Request → Targeted Edit\n\n**User input:**\n> \"add a search bar\"\n\n**Enhanced output:**\n```markdown\nAdd a search bar to the header navigation.\n\n**Specific changes:**\n- Location: Header, right side before user avatar\n- Style: Pill-shaped input with subtle gray background (#f3f4f6)\n- Icon: Magnifying glass icon on the left, inside the input\n- Placeholder: \"Search...\" in light gray (#9ca3af)\n- Behavior: Expands on focus with subtle shadow\n- Width: 240px default, 320px on focus\n\n**Context:** This is a targeted edit. Make only this change while preserving all existing elements.\n```\n\n## Tips for Best Results\n\n1. **Be specific early** — Vague inputs need more enhancement\n2. **Match the user's intent** — Don't over-design if they want simple\n3. **Keep it structured** — Numbered sections help Stitch understand hierarchy\n4. **Include the design system** — Consistency is key for multi-page projects\n5. **One change at a time for edits** — Don't bundle unrelated changes\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,133,699,"2026-05-16 13:16:50",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"UI 设计","ui-design","mdi-monitor-cellphone","界面设计、交互规范、设计系统",1,36,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"4a36f2af-bcc3-4abe-ae20-25ad66bdc43a","1.0.0","enhance-prompt.zip",3241,"uploads\u002Fskills\u002F25325c93-503b-4653-89e2-3c9d397c2ba9\u002Fenhance-prompt.zip","3c4ade6e00dcc9a266f4ba4cbe53abe132e6c306093199c8bf61a36fb6b2a6b9","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":6991}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]