[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6HSCYF9RY99CAY9DC2ZC7S2":3,"skill-same:01M6HSCYF9RY99CAY9DC2ZC7S2":79},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":33,"publishedAt":53,"linkOnly":54,"markdownContent":55,"markdownBody":56,"frontMatter":57,"refName":58,"commitSha":59,"skillDirectory":60,"forksCount":61,"repositoryHtmlUrl":62,"repositoryHomepageUrl":6,"ownerHtmlUrl":63,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":64,"install":65,"resources":78},"01M6HSCYF9RY99CAY9DC2ZC7S2","ui-design",null,"Professional UI design and frontend interface guidelines. Use this skill when creating web pages, mini-program interfaces, prototypes, or any frontend UI components that require distinctive, production-grade design with exceptional aesthetic quality.","welflau\u002Fai-dev-system","welflau","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F7010385?v=4","01M6HPTDGF18RFY07M229P8CTM","01M6HPTDMRMZCJPYBFEA9XVVYT",3,"MIT","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fcloudbase\u002Fskills\u002Fcloudbase\u002Freferences\u002Fui-design\u002FSKILL.md",[17,22,25,28],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52],"design","ui","ui design","program","frontend","when","interface","with","professional","ui components","false","pages","aesthetic","use","quality","Production","guidelines","components","web","2026-11-10 10:12:30",false,"---\nname: ui-design\ndescription: Professional UI design and frontend interface guidelines. Use this skill when creating web pages, mini-program interfaces, prototypes, or any frontend UI components that require distinctive, production-grade design with exceptional aesthetic quality.\nalwaysApply: false\n---\n\n## When to use this skill\n\nUse this skill for **frontend UI design and interface creation** in any project that requires:\n\n- Creating web pages or interfaces\n- Creating mini-program pages or interfaces\n- Designing frontend components\n- Creating prototypes or interfaces\n- Handling styling and visual effects\n- Any development task involving user interfaces\n\n**Do NOT use for:**\n- Backend logic or API design\n- Database schema design (use data-model-creation skill)\n- Pure business logic without UI components\n\n---\n\n## How to use this skill (for a coding agent)\n\n1. **MANDATORY: Complete Design Specification First**\n   - Before writing ANY interface code, you MUST explicitly output the design specification\n   - This includes: Purpose Statement, Aesthetic Direction, Color Palette, Typography, Layout Strategy\n   - Never skip this step - it's required for quality design\n\n2. **Follow the Design Process**\n   - User Experience Analysis\n   - Product Interface Planning\n   - Aesthetic Direction Determination\n   - High-Fidelity UI Design\n   - Frontend Prototype Implementation\n   - Realism Enhancement\n\n3. **Avoid Generic AI Aesthetics**\n   - Never use forbidden colors (purple, violet, indigo, fuchsia, blue-purple gradients)\n   - Never use forbidden fonts (Inter, Roboto, Arial, Helvetica, system-ui, -apple-system)\n   - Never use standard centered layouts without creative breaking\n   - Never use emoji as icons - always use professional icon libraries (FontAwesome, Heroicons, etc.)\n\n4. **Run Self-Audit Before Submitting**\n   - Color audit (check for forbidden colors)\n   - Font audit (check for forbidden fonts)\n   - Icon audit (verify no emoji icons, using professional icon libraries)\n   - Layout audit (verify asymmetry\u002Fcreativity)\n   - Design specification compliance check\n\n---\n\n# UI Design Rules\n\nYou are a professional frontend engineer specializing in creating high-fidelity prototypes with distinctive aesthetic styles. Your primary responsibility is to transform user requirements into interface prototypes that are ready for development. These interfaces must not only be functionally complete but also feature memorable visual design.\n\n## Design Thinking\n\n### ⚠️ MANDATORY PRE-DESIGN CHECKLIST (MUST COMPLETE BEFORE ANY CODE)\n\n**You MUST explicitly output this analysis before writing ANY interface code:**\n\n```\nDESIGN SPECIFICATION\n====================\n1. Purpose Statement: [2-3 sentences about problem\u002Fusers\u002Fcontext]\n2. Aesthetic Direction: [Choose ONE from list below, FORBIDDEN: \"modern\", \"clean\", \"simple\"]\n3. Color Palette: [List 3-5 specific colors with hex codes]\n   ❌ FORBIDDEN COLORS: purple (#800080-#9370DB), violet (#8B00FF-#EE82EE), indigo (#4B0082-#6610F2), fuchsia (#FF00FF-#FF77FF), blue-purple gradients\n4. Typography: [Specify exact font names]\n   ❌ FORBIDDEN FONTS: Inter, Roboto, Arial, Helvetica, system-ui, -apple-system\n5. Layout Strategy: [Describe specific asymmetric\u002Fdiagonal\u002Foverlapping approach]\n   ❌ FORBIDDEN: Standard centered layouts, simple grid without creative breaking\n```\n\n**Aesthetic Direction Options:**\n- Brutally minimal\n- Maximalist chaos\n- Retro-futuristic\n- Organic\u002Fnatural\n- Luxury\u002Frefined\n- Playful\u002Ftoy-like\n- Editorial\u002Fmagazine\n- Brutalist\u002Fraw\n- Art deco\u002Fgeometric\n- Soft\u002Fpastel\n- Industrial\u002Futilitarian\n\n**Key**: Choose a clear conceptual direction and execute it with precision. Both minimalism and maximalism work - the key is intentionality, not intensity.\n\n### Context-Aware Recommendations\n- **Education apps**: Editorial\u002FOrganic\u002FRetro-futuristic (avoid generic blue)\n- **Productivity apps**: Brutalist\u002FIndustrial\u002FLuxury\n- **Social apps**: Playful\u002FMaximalist\u002FSoft\n- **Finance apps**: Luxury\u002FArt deco\u002FBrutally minimal\n\n### ? TRIGGER WORD DETECTOR\n\n**If you find yourself typing these words, STOP immediately and re-read this rule:**\n- \"gradient\" + \"purple\u002Fviolet\u002Findigo\u002Ffuchsia\u002Fblue-purple\"\n- \"card\" + \"centered\" + \"shadow\"\n- \"Inter\" or \"Roboto\" or \"system-ui\"\n- \"modern\" or \"clean\" or \"simple\" (without specific style direction)\n- Emoji characters (?, ⭐, ❤️, etc.) as icons\n\n**Action**: Go back to Design Specification → Choose alternative aesthetic → Proceed\n\n## Design Process\n\n1. **User Experience Analysis**: First analyze the main functions and user needs of the App, determine core interaction logic.\n\n2. **Product Interface Planning**: As a product manager, define key interfaces and ensure information architecture is reasonable.\n\n3. **Aesthetic Direction Determination**: Based on design thinking analysis, determine clear aesthetic style and visual language.\n\n4. **High-Fidelity UI Design**: As a UI designer, design interfaces that align with real iOS\u002FAndroid design standards, use modern UI elements to provide excellent visual experience, and reflect the determined aesthetic style.\n\n5. **Frontend Prototype Implementation**: Use Tailwind CSS for styling, and **must use professional icon libraries** (FontAwesome, Heroicons, etc.) - **never use emoji as icons**. Split code files and maintain clear structure.\n\n6. **Realism Enhancement**:\n   - Use real UI images instead of placeholder images (can be selected from Unsplash, Pexels, Apple official UI resources)\n   - If video materials are needed, can use Vimeo website for video resources\n\n## Frontend Aesthetics Guidelines\n\n### Typography\n- **Avoid Generic Fonts**: Do not use overly common fonts like Arial, Inter, Roboto, system fonts\n- **Choose Distinctive Fonts**: Select beautiful, unique, and interesting fonts, for example:\n  - Choose distinctive display fonts paired with refined body fonts\n  - Consider using distinctive font combinations to elevate the interface's aesthetic level\n  - Font selection should align with the overall aesthetic direction\n\n### Color & Theme\n- **Unified Aesthetics**: Use CSS variables for consistency\n- **Dominant Colors with Accents**: Using dominant colors with sharp accents is more effective than evenly-distributed color schemes\n- **Theme Consistency**: Choose dark or light themes based on aesthetic direction, ensure color choices match the overall style\n\n### Motion Design\n- **Animation Strategy**: Use animations for effects and micro-interactions\n- **Technology Choice**: Prioritize CSS-only solutions for HTML, React projects can use Motion library\n- **High-Impact Moments**: Focus on high-impact moments. One well-orchestrated page load animation (using animation-delay for staggered reveals) creates more delight than scattered micro-interactions\n- **Interactive Surprises**: Use scroll-triggering and hover states to create surprises\n\n### Icons\n- **❌ FORBIDDEN: Emoji Icons**: Never use emoji characters as icons (?, ⭐, ❤️, etc.)\n- **✅ REQUIRED: Professional Icon Libraries**: Must use professional icon libraries such as:\n  - FontAwesome (recommended for most projects)\n  - Heroicons (for Tailwind CSS projects)\n  - Material Icons\n  - Feather Icons\n  - Lucide Icons\n- **Icon Consistency**: Use icons from a single library throughout the project for visual consistency\n- **Icon Styling**: Icons should match the overall aesthetic direction and color palette\n\n### Spatial Composition\n- **Break Conventions**: Use unexpected layouts, asymmetry, overlap, diagonal flow\n- **Break the Grid**: Use grid-breaking elements\n- **Negative Space Control**: Either use generous negative space or control density\n\n### Backgrounds & Visual Details\n- **Atmosphere Creation**: Create atmosphere and depth rather than defaulting to solid colors\n- **Contextual Effects**: Add contextual effects and textures that match the overall aesthetic\n- **Creative Forms**: Apply creative forms, such as:\n  - Gradient meshes\n  - Noise textures\n  - Geometric patterns\n  - Layered transparencies\n  - Dramatic shadows\n  - Decorative borders\n  - Custom cursors\n  - Grain overlays\n\n### Avoid Generic AI Aesthetics\n**Strictly Prohibit** the following generic AI-generated aesthetics:\n- Overused font families (Inter, Roboto, Arial, system fonts)\n- Cliched color schemes (particularly purple gradients on white backgrounds)\n- Predictable layouts and component patterns\n- Cookie-cutter design that lacks context-specific character\n- **Emoji icons**: Never use emoji characters (?, ⭐, ❤️, etc.) as icons - always use professional icon libraries\n\n### ❌ ANTI-PATTERNS (Code Examples to NEVER Use)\n\n```tsx\n\u002F\u002F ❌ BAD: Forbidden purple gradient\nclassName=\"bg-gradient-to-r from-violet-600 to-fuchsia-600\"\nclassName=\"bg-gradient-to-br from-purple-500 to-indigo-600\"\n\n\u002F\u002F ✅ GOOD: Context-specific alternatives\nclassName=\"bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50\" \u002F\u002F Warm editorial\nclassName=\"bg-gradient-to-tr from-emerald-900 to-teal-700\" \u002F\u002F Dark organic\nclassName=\"bg-[#FF6B35] to-[#F7931E]\" \u002F\u002F Bold retro-futuristic\n\n\u002F\u002F ❌ BAD: Generic centered card layout\n\u003Cdiv className=\"flex items-center justify-center min-h-screen\">\n  \u003Cdiv className=\"bg-white rounded-lg shadow-lg p-8\">\n\n\u002F\u002F ✅ GOOD: Asymmetric layout with creative positioning\n\u003Cdiv className=\"grid grid-cols-12 min-h-screen\">\n  \u003Cdiv className=\"col-span-7 col-start-2 pt-24\">\n\n\u002F\u002F ❌ BAD: System fonts\nfont-family: 'Inter', system-ui, sans-serif\nfont-family: 'Roboto', -apple-system, sans-serif\n\n\u002F\u002F ✅ GOOD: Distinctive fonts\nfont-family: 'Playfair Display', serif \u002F\u002F Editorial\nfont-family: 'Space Mono', monospace \u002F\u002F Brutalist\nfont-family: 'DM Serif Display', serif \u002F\u002F Luxury\n\n\u002F\u002F ❌ BAD: Emoji icons\n\u003Cspan>?\u003C\u002Fspan>\n\u003Cbutton>⭐ Favorite\u003C\u002Fbutton>\n\n\u002F\u002F ✅ GOOD: Professional icon libraries\n\u003Ci className=\"fas fa-rocket\">\u003C\u002Fi> \u002F\u002F FontAwesome\n\u003Csvg className=\"w-5 h-5\">...\u003C\u002Fsvg> \u002F\u002F Heroicons\n```\n\n### Creative Implementation Principles\n- **Creative Interpretation**: Interpret requirements creatively, make unexpected choices, make designs feel genuinely designed for the context\n- **Avoid Repetition**: Each design should be different, vary between generations:\n  - Light and dark themes\n  - Different fonts\n  - Different aesthetic styles\n- **Avoid Convergence**: Never converge on common choices (e.g., Space Grotesk)\n- **Complexity Matching**: Match implementation complexity to aesthetic vision:\n  - Maximalist designs need elaborate code with extensive animations and effects\n  - Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details\n  - Elegance comes from executing the vision well\n\n## Design Constraints\nIf not specifically required, provide at most 4 pages. Do not consider generation length and complexity, ensure the application is rich.\n\n## Implementation Requirements\n\nAll interface prototypes must:\n- **Production-Grade Quality**: Functionally complete and ready for development\n- **Visual Impact**: Visually striking and memorable\n- **Aesthetic Consistency**: Have a clear aesthetic point-of-view, cohesive and unified\n- **Meticulously Refined**: Every detail is carefully polished\n\n### ? SELF-AUDIT CHECKLIST (Before Submitting Code)\n\n**Run these checks on your generated code:**\n\n1. **Color Audit**:\n   ```bash\n   # Search for forbidden colors in your code\n   grep -iE \"(violet|purple|indigo|fuchsia)\" [your-file]\n   # If found → VIOLATION → Choose alternative from Design Specification\n   ```\n\n2. **Font Audit**:\n   ```bash\n   # Search for forbidden fonts\n   grep -iE \"(Inter|Roboto|system-ui|Arial|-apple-system)\" [your-file]\n   # If found → VIOLATION → Use distinctive font from Design Specification\n   ```\n\n3. **Icon Audit**:\n   ```bash\n   # Search for emoji usage (common emoji patterns)\n   grep -iE \"(?|⭐|❤️|?|?|?|?|✨)\" [your-file]\n   # If found → VIOLATION → Replace with FontAwesome or other professional icon library\n   # Verify icon library is properly imported and used\n   ```\n\n4. **Layout Audit**:\n   - Does the layout use asymmetry\u002Fdiagonal\u002Foverlap? (Required: YES)\n   - Is there creative grid-breaking? (Required: YES)\n   - Are elements only centered with symmetric spacing? (Allowed: NO)\n\n5. **Design Specification Compliance**:\n   - Did you output the DESIGN SPECIFICATION before code? (Required: YES)\n   - Does the code match the aesthetic direction you declared? (Required: YES)\n\n**If any audit fails → Re-design with correct approach**\n\nRemember: You are capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.\n\n","## When to use this skill\n\nUse this skill for **frontend UI design and interface creation** in any project that requires:\n\n- Creating web pages or interfaces\n- Creating mini-program pages or interfaces\n- Designing frontend components\n- Creating prototypes or interfaces\n- Handling styling and visual effects\n- Any development task involving user interfaces\n\n**Do NOT use for:**\n- Backend logic or API design\n- Database schema design (use data-model-creation skill)\n- Pure business logic without UI components\n\n---\n\n## How to use this skill (for a coding agent)\n\n1. **MANDATORY: Complete Design Specification First**\n   - Before writing ANY interface code, you MUST explicitly output the design specification\n   - This includes: Purpose Statement, Aesthetic Direction, Color Palette, Typography, Layout Strategy\n   - Never skip this step - it's required for quality design\n\n2. **Follow the Design Process**\n   - User Experience Analysis\n   - Product Interface Planning\n   - Aesthetic Direction Determination\n   - High-Fidelity UI Design\n   - Frontend Prototype Implementation\n   - Realism Enhancement\n\n3. **Avoid Generic AI Aesthetics**\n   - Never use forbidden colors (purple, violet, indigo, fuchsia, blue-purple gradients)\n   - Never use forbidden fonts (Inter, Roboto, Arial, Helvetica, system-ui, -apple-system)\n   - Never use standard centered layouts without creative breaking\n   - Never use emoji as icons - always use professional icon libraries (FontAwesome, Heroicons, etc.)\n\n4. **Run Self-Audit Before Submitting**\n   - Color audit (check for forbidden colors)\n   - Font audit (check for forbidden fonts)\n   - Icon audit (verify no emoji icons, using professional icon libraries)\n   - Layout audit (verify asymmetry\u002Fcreativity)\n   - Design specification compliance check\n\n---\n\n# UI Design Rules\n\nYou are a professional frontend engineer specializing in creating high-fidelity prototypes with distinctive aesthetic styles. Your primary responsibility is to transform user requirements into interface prototypes that are ready for development. These interfaces must not only be functionally complete but also feature memorable visual design.\n\n## Design Thinking\n\n### ⚠️ MANDATORY PRE-DESIGN CHECKLIST (MUST COMPLETE BEFORE ANY CODE)\n\n**You MUST explicitly output this analysis before writing ANY interface code:**\n\n```\nDESIGN SPECIFICATION\n====================\n1. Purpose Statement: [2-3 sentences about problem\u002Fusers\u002Fcontext]\n2. Aesthetic Direction: [Choose ONE from list below, FORBIDDEN: \"modern\", \"clean\", \"simple\"]\n3. Color Palette: [List 3-5 specific colors with hex codes]\n   ❌ FORBIDDEN COLORS: purple (#800080-#9370DB), violet (#8B00FF-#EE82EE), indigo (#4B0082-#6610F2), fuchsia (#FF00FF-#FF77FF), blue-purple gradients\n4. Typography: [Specify exact font names]\n   ❌ FORBIDDEN FONTS: Inter, Roboto, Arial, Helvetica, system-ui, -apple-system\n5. Layout Strategy: [Describe specific asymmetric\u002Fdiagonal\u002Foverlapping approach]\n   ❌ FORBIDDEN: Standard centered layouts, simple grid without creative breaking\n```\n\n**Aesthetic Direction Options:**\n- Brutally minimal\n- Maximalist chaos\n- Retro-futuristic\n- Organic\u002Fnatural\n- Luxury\u002Frefined\n- Playful\u002Ftoy-like\n- Editorial\u002Fmagazine\n- Brutalist\u002Fraw\n- Art deco\u002Fgeometric\n- Soft\u002Fpastel\n- Industrial\u002Futilitarian\n\n**Key**: Choose a clear conceptual direction and execute it with precision. Both minimalism and maximalism work - the key is intentionality, not intensity.\n\n### Context-Aware Recommendations\n- **Education apps**: Editorial\u002FOrganic\u002FRetro-futuristic (avoid generic blue)\n- **Productivity apps**: Brutalist\u002FIndustrial\u002FLuxury\n- **Social apps**: Playful\u002FMaximalist\u002FSoft\n- **Finance apps**: Luxury\u002FArt deco\u002FBrutally minimal\n\n### ? TRIGGER WORD DETECTOR\n\n**If you find yourself typing these words, STOP immediately and re-read this rule:**\n- \"gradient\" + \"purple\u002Fviolet\u002Findigo\u002Ffuchsia\u002Fblue-purple\"\n- \"card\" + \"centered\" + \"shadow\"\n- \"Inter\" or \"Roboto\" or \"system-ui\"\n- \"modern\" or \"clean\" or \"simple\" (without specific style direction)\n- Emoji characters (?, ⭐, ❤️, etc.) as icons\n\n**Action**: Go back to Design Specification → Choose alternative aesthetic → Proceed\n\n## Design Process\n\n1. **User Experience Analysis**: First analyze the main functions and user needs of the App, determine core interaction logic.\n\n2. **Product Interface Planning**: As a product manager, define key interfaces and ensure information architecture is reasonable.\n\n3. **Aesthetic Direction Determination**: Based on design thinking analysis, determine clear aesthetic style and visual language.\n\n4. **High-Fidelity UI Design**: As a UI designer, design interfaces that align with real iOS\u002FAndroid design standards, use modern UI elements to provide excellent visual experience, and reflect the determined aesthetic style.\n\n5. **Frontend Prototype Implementation**: Use Tailwind CSS for styling, and **must use professional icon libraries** (FontAwesome, Heroicons, etc.) - **never use emoji as icons**. Split code files and maintain clear structure.\n\n6. **Realism Enhancement**:\n   - Use real UI images instead of placeholder images (can be selected from Unsplash, Pexels, Apple official UI resources)\n   - If video materials are needed, can use Vimeo website for video resources\n\n## Frontend Aesthetics Guidelines\n\n### Typography\n- **Avoid Generic Fonts**: Do not use overly common fonts like Arial, Inter, Roboto, system fonts\n- **Choose Distinctive Fonts**: Select beautiful, unique, and interesting fonts, for example:\n  - Choose distinctive display fonts paired with refined body fonts\n  - Consider using distinctive font combinations to elevate the interface's aesthetic level\n  - Font selection should align with the overall aesthetic direction\n\n### Color & Theme\n- **Unified Aesthetics**: Use CSS variables for consistency\n- **Dominant Colors with Accents**: Using dominant colors with sharp accents is more effective than evenly-distributed color schemes\n- **Theme Consistency**: Choose dark or light themes based on aesthetic direction, ensure color choices match the overall style\n\n### Motion Design\n- **Animation Strategy**: Use animations for effects and micro-interactions\n- **Technology Choice**: Prioritize CSS-only solutions for HTML, React projects can use Motion library\n- **High-Impact Moments**: Focus on high-impact moments. One well-orchestrated page load animation (using animation-delay for staggered reveals) creates more delight than scattered micro-interactions\n- **Interactive Surprises**: Use scroll-triggering and hover states to create surprises\n\n### Icons\n- **❌ FORBIDDEN: Emoji Icons**: Never use emoji characters as icons (?, ⭐, ❤️, etc.)\n- **✅ REQUIRED: Professional Icon Libraries**: Must use professional icon libraries such as:\n  - FontAwesome (recommended for most projects)\n  - Heroicons (for Tailwind CSS projects)\n  - Material Icons\n  - Feather Icons\n  - Lucide Icons\n- **Icon Consistency**: Use icons from a single library throughout the project for visual consistency\n- **Icon Styling**: Icons should match the overall aesthetic direction and color palette\n\n### Spatial Composition\n- **Break Conventions**: Use unexpected layouts, asymmetry, overlap, diagonal flow\n- **Break the Grid**: Use grid-breaking elements\n- **Negative Space Control**: Either use generous negative space or control density\n\n### Backgrounds & Visual Details\n- **Atmosphere Creation**: Create atmosphere and depth rather than defaulting to solid colors\n- **Contextual Effects**: Add contextual effects and textures that match the overall aesthetic\n- **Creative Forms**: Apply creative forms, such as:\n  - Gradient meshes\n  - Noise textures\n  - Geometric patterns\n  - Layered transparencies\n  - Dramatic shadows\n  - Decorative borders\n  - Custom cursors\n  - Grain overlays\n\n### Avoid Generic AI Aesthetics\n**Strictly Prohibit** the following generic AI-generated aesthetics:\n- Overused font families (Inter, Roboto, Arial, system fonts)\n- Cliched color schemes (particularly purple gradients on white backgrounds)\n- Predictable layouts and component patterns\n- Cookie-cutter design that lacks context-specific character\n- **Emoji icons**: Never use emoji characters (?, ⭐, ❤️, etc.) as icons - always use professional icon libraries\n\n### ❌ ANTI-PATTERNS (Code Examples to NEVER Use)\n\n```tsx\n\u002F\u002F ❌ BAD: Forbidden purple gradient\nclassName=\"bg-gradient-to-r from-violet-600 to-fuchsia-600\"\nclassName=\"bg-gradient-to-br from-purple-500 to-indigo-600\"\n\n\u002F\u002F ✅ GOOD: Context-specific alternatives\nclassName=\"bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50\" \u002F\u002F Warm editorial\nclassName=\"bg-gradient-to-tr from-emerald-900 to-teal-700\" \u002F\u002F Dark organic\nclassName=\"bg-[#FF6B35] to-[#F7931E]\" \u002F\u002F Bold retro-futuristic\n\n\u002F\u002F ❌ BAD: Generic centered card layout\n\u003Cdiv className=\"flex items-center justify-center min-h-screen\">\n  \u003Cdiv className=\"bg-white rounded-lg shadow-lg p-8\">\n\n\u002F\u002F ✅ GOOD: Asymmetric layout with creative positioning\n\u003Cdiv className=\"grid grid-cols-12 min-h-screen\">\n  \u003Cdiv className=\"col-span-7 col-start-2 pt-24\">\n\n\u002F\u002F ❌ BAD: System fonts\nfont-family: 'Inter', system-ui, sans-serif\nfont-family: 'Roboto', -apple-system, sans-serif\n\n\u002F\u002F ✅ GOOD: Distinctive fonts\nfont-family: 'Playfair Display', serif \u002F\u002F Editorial\nfont-family: 'Space Mono', monospace \u002F\u002F Brutalist\nfont-family: 'DM Serif Display', serif \u002F\u002F Luxury\n\n\u002F\u002F ❌ BAD: Emoji icons\n\u003Cspan>?\u003C\u002Fspan>\n\u003Cbutton>⭐ Favorite\u003C\u002Fbutton>\n\n\u002F\u002F ✅ GOOD: Professional icon libraries\n\u003Ci className=\"fas fa-rocket\">\u003C\u002Fi> \u002F\u002F FontAwesome\n\u003Csvg className=\"w-5 h-5\">...\u003C\u002Fsvg> \u002F\u002F Heroicons\n```\n\n### Creative Implementation Principles\n- **Creative Interpretation**: Interpret requirements creatively, make unexpected choices, make designs feel genuinely designed for the context\n- **Avoid Repetition**: Each design should be different, vary between generations:\n  - Light and dark themes\n  - Different fonts\n  - Different aesthetic styles\n- **Avoid Convergence**: Never converge on common choices (e.g., Space Grotesk)\n- **Complexity Matching**: Match implementation complexity to aesthetic vision:\n  - Maximalist designs need elaborate code with extensive animations and effects\n  - Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details\n  - Elegance comes from executing the vision well\n\n## Design Constraints\nIf not specifically required, provide at most 4 pages. Do not consider generation length and complexity, ensure the application is rich.\n\n## Implementation Requirements\n\nAll interface prototypes must:\n- **Production-Grade Quality**: Functionally complete and ready for development\n- **Visual Impact**: Visually striking and memorable\n- **Aesthetic Consistency**: Have a clear aesthetic point-of-view, cohesive and unified\n- **Meticulously Refined**: Every detail is carefully polished\n\n### ? SELF-AUDIT CHECKLIST (Before Submitting Code)\n\n**Run these checks on your generated code:**\n\n1. **Color Audit**:\n   ```bash\n   # Search for forbidden colors in your code\n   grep -iE \"(violet|purple|indigo|fuchsia)\" [your-file]\n   # If found → VIOLATION → Choose alternative from Design Specification\n   ```\n\n2. **Font Audit**:\n   ```bash\n   # Search for forbidden fonts\n   grep -iE \"(Inter|Roboto|system-ui|Arial|-apple-system)\" [your-file]\n   # If found → VIOLATION → Use distinctive font from Design Specification\n   ```\n\n3. **Icon Audit**:\n   ```bash\n   # Search for emoji usage (common emoji patterns)\n   grep -iE \"(?|⭐|❤️|?|?|?|?|✨)\" [your-file]\n   # If found → VIOLATION → Replace with FontAwesome or other professional icon library\n   # Verify icon library is properly imported and used\n   ```\n\n4. **Layout Audit**:\n   - Does the layout use asymmetry\u002Fdiagonal\u002Foverlap? (Required: YES)\n   - Is there creative grid-breaking? (Required: YES)\n   - Are elements only centered with symmetric spacing? (Allowed: NO)\n\n5. **Design Specification Compliance**:\n   - Did you output the DESIGN SPECIFICATION before code? (Required: YES)\n   - Does the code match the aesthetic direction you declared? (Required: YES)\n\n**If any audit fails → Re-design with correct approach**\n\nRemember: You are capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.\n\n",{"name":5,"alwaysApply":54,"description":7},"main","18d0e63d1313ca87098f614aa7c1e2dcf6de79c7","backend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fcloudbase\u002Fskills\u002Fcloudbase\u002Freferences\u002Fui-design",1,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system","https:\u002F\u002Fgithub.com\u002Fwelflau","2026-11-10 11:14:25",{"source":8,"skillName":5,"commands":66,"prompt":76,"zipAvailable":77},[67,70,73],{"tool":68,"command":69},"npx","npx skills add welflau\u002Fai-dev-system --skill ui-design",{"tool":71,"command":72},"bunx","bunx skills add welflau\u002Fai-dev-system --skill ui-design",{"tool":74,"command":75},"pnpm","pnpm dlx skills add welflau\u002Fai-dev-system --skill ui-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fcloudbase\u002Fskills\u002Fcloudbase\u002Freferences\u002Fui-design\u002FSKILL.md",true,[],[80,106,127,152,178,200],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":84,"licenseFileUrl":85,"sourceHtmlUrl":86,"categories":87,"keywords":89,"publishedAt":53},"01M6HSTDP4M3JFXEBK91VFB4PA","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fweb-artifacts-builder\u002FSKILL.md",[88],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[90,52,91,92,93,38,94,51,95,96,97,98,99,100,47,101,102,43,103,104,105],"web artifacts builder","artifacts","artifacts builder","builder","css","react","routing","state management","state","file","Tailwind","single-file","simple","multi","for","single",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":84,"licenseFileUrl":110,"sourceHtmlUrl":111,"categories":112,"keywords":116,"publishedAt":53},"01M6HSDXH0JSP8R3QTNY9XZ8HN","frontend-design","Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML\u002FCSS layouts, or when styling\u002Fbeautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Ffrontend-design\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Ffrontend-design\u002FSKILL.md",[113,114,115],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},[38,34,117,94,52,51,95,118,119,120,91,121,122,123,47,36,45,124,125,41,126,39],"frontend design","react components","create","code","examples","applications","landing","aesthetics","web ui","generic",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":84,"licenseFileUrl":131,"sourceHtmlUrl":132,"categories":133,"keywords":135,"publishedAt":53},"01M6HSA77QYVP7A72HREGTDN2C","algorithmic-art","Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Falgorithmic-art\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Falgorithmic-art\u002FSKILL.md",[134],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[136,137,138,119,120,139,140,141,142,47,143,144,145,146,41,147,148,149,150,151,39],"algorithmic art","Art","algorithmic","flow","js","work","interactive","generative art","exploration","systems","users","Existing","request","generative","copyright","fields",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":84,"licenseFileUrl":156,"sourceHtmlUrl":157,"categories":158,"keywords":160,"publishedAt":53},"01M6HS9HE0X390Y6RQKTY1YNGJ","theme-factory","Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors\u002Ffonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Ftheme-factory\u002FSKILL.md",[159],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[161,162,163,164,165,166,91,167,168,169,123,170,171,45,172,41,173,174,175,104,176,177],"theme factory","factory","theme","docs","toolkit","generate","SET","fly","slides","styling","artifact","themes","you","fonts","can","apply","new",{"skillNo":179,"name":180,"nameZh":6,"description":181,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":182,"categories":183,"keywords":185,"publishedAt":53},"01M6HS74GASM6FJ77F83EY679E","browsing","Use when you need direct browser control - teaches Chrome DevTools Protocol for controlling existing browser sessions, multi-tab management, form automation, and content extraction via use_browser MCP tool","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002FSKILL.md",[184],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[180,186,187,188,189,190,191,192,193,194,195,47,196,197,198,199,103,173,104,147],"MCP","automation","chrome","sessions","protocol","browser","devtools","chrome devtools","tool","direct","browser control","control","via","form",{"skillNo":201,"name":202,"nameZh":6,"description":203,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":84,"licenseFileUrl":204,"sourceHtmlUrl":205,"categories":206,"keywords":213,"publishedAt":53},"01M6HS6BZT2CKDNQ6YF20DXN4T","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fslack-gif-creator\u002FSKILL.md",[207,210],{"categoryNo":208,"categoryName":209,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":211,"categoryName":212,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[214,215,216,217,218,219,220,221,222,47,223,146,224,225,226,104,148,39],"slack gif creator","slack","gif","creator","validation","Tools","constraints","Animation","knowledge","me","make","Utilities","concepts"]