From d603b31eb120202b3c0588e69d9c1f529aa431ee Mon Sep 17 00:00:00 2001 From: Riku Inada Date: Mon, 12 Jan 2026 15:50:29 +0900 Subject: [PATCH 1/5] Add frontend-design power Knowledge Base Power for creating distinctive frontend interfaces that avoid generic AI aesthetics. Includes guidelines for: - Typography (avoid Inter/Roboto/Arial) - Color & theme (avoid purple gradients) - Motion & animation - Spatial composition - Backgrounds & visual details Based on Anthropic's Claude Code frontend-design skill. --- frontend-design/POWER.md | 171 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 frontend-design/POWER.md diff --git a/frontend-design/POWER.md b/frontend-design/POWER.md new file mode 100644 index 0000000..56066a7 --- /dev/null +++ b/frontend-design/POWER.md @@ -0,0 +1,171 @@ +--- +name: "frontend-design" +displayName: "Frontend Design" +description: "Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Guides bold design choices with memorable typography, color, and motion." +keywords: ["frontend", "design", "ui", "css", "aesthetics", "web", "react", "tailwind"] +author: "Anthropic (adapted for Kiro)" +--- + +# Frontend Design + +## Overview + +This power guides the creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. When building web components, pages, or applications, use this guidance to implement real working code with exceptional attention to aesthetic details and creative choices. + +The goal is to create interfaces that are: +- **Visually striking and memorable** - Not another purple gradient on white +- **Production-grade and functional** - Real code, not mockups +- **Cohesive with clear aesthetic direction** - Intentional design choices +- **Meticulously refined** - Every detail matters + +## Design Thinking Process + +Before coding, understand the context and commit to a **BOLD** aesthetic direction: + +### 1. Purpose +What problem does this interface solve? Who uses it? + +### 2. Tone +Pick an extreme aesthetic direction. There are many flavors to choose from: +- Brutally minimal +- Maximalist chaos +- Retro-futuristic +- Organic/natural +- Luxury/refined +- Playful/toy-like +- Editorial/magazine +- Brutalist/raw +- Art deco/geometric +- Soft/pastel +- Industrial/utilitarian + +Use these for inspiration but design one that is true to the aesthetic direction. + +### 3. Constraints +Technical requirements: framework, performance, accessibility. + +### 4. Differentiation +What makes this **UNFORGETTABLE**? What's the one thing someone will remember? + +**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is **intentionality**, not intensity. + +## Frontend Aesthetics Guidelines + +### Typography + +Choose fonts that are **beautiful, unique, and interesting**. + +**AVOID:** +- Generic fonts: Arial, Inter, Roboto, system fonts +- Safe, predictable choices + +**DO:** +- Opt for distinctive choices that elevate the frontend's aesthetics +- Unexpected, characterful font choices +- Pair a distinctive display font with a refined body font + +### Color & Theme + +Commit to a **cohesive aesthetic**. + +**Best Practices:** +- Use CSS variables for consistency +- Dominant colors with sharp accents outperform timid, evenly-distributed palettes +- Avoid cliched color schemes (particularly purple gradients on white backgrounds) + +### Motion & Animation + +Use animations for effects and micro-interactions. + +**Approach:** +- Prioritize CSS-only solutions for HTML +- Use Motion library for React when available +- Focus on high-impact moments: one well-orchestrated page load with staggered reveals (`animation-delay`) creates more delight than scattered micro-interactions +- Use scroll-triggering and hover states that surprise + +### Spatial Composition + +Break free from predictable layouts: +- Unexpected layouts +- Asymmetry +- Overlap +- Diagonal flow +- Grid-breaking elements +- Generous negative space OR controlled density + +### Backgrounds & Visual Details + +Create atmosphere and depth rather than defaulting to solid colors. + +**Techniques:** +- Gradient meshes +- Noise textures +- Geometric patterns +- Layered transparencies +- Dramatic shadows +- Decorative borders +- Custom cursors +- Grain overlays + +## What to NEVER Do + +**NEVER use generic AI-generated aesthetics:** + +| Category | Avoid | +|----------|-------| +| Typography | Inter, Roboto, Arial, system fonts | +| Colors | Purple gradients on white backgrounds | +| Layouts | Predictable component patterns | +| Overall | Cookie-cutter design lacking context-specific character | + +## Implementation Guidance + +### Match Complexity to Vision + +- **Maximalist designs** need elaborate code with extensive animations and effects +- **Minimalist/refined designs** need restraint, precision, and careful attention to spacing, typography, and subtle details + +Elegance comes from executing the vision well. + +### Variety is Essential + +- Vary between light and dark themes +- Use different fonts across projects +- Explore different aesthetics +- **NEVER** converge on common choices (e.g., Space Grotesk) across generations + +### Code Quality + +Implement working code (HTML/CSS/JS, React, Vue, etc.) that is: +- Production-grade and functional +- Visually striking and memorable +- Cohesive with a clear aesthetic point-of-view +- Meticulously refined in every detail + +## Example Prompts + +Use this power when asked to: + +``` +"Create a dashboard for a music streaming app" +"Build a landing page for an AI security startup" +"Design a settings panel with dark mode" +"Build a pixel art character store" +"Create a retro arcade-themed checkout flow" +``` + +The agent will choose a clear aesthetic direction and implement production code with meticulous attention to detail. + +## Best Practices Summary + +1. **Commit to a direction** - Don't hedge with generic components +2. **Be intentional** - Every choice should serve the aesthetic +3. **Surprise and delight** - Add unexpected details +4. **Execute with precision** - Details matter +5. **Avoid the median** - If it looks like every other AI-generated UI, start over + +Remember: Extraordinary creative work is possible. Don't hold back - show what can truly be created when thinking outside the box and committing fully to a distinctive vision. + +## Learn More + +See the [Frontend Aesthetics Cookbook](https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb) for detailed guidance on prompting for high-quality frontend design. From 7a7d552432b043522ae69911082466fd8050528d Mon Sep 17 00:00:00 2001 From: Riku Inada Date: Mon, 12 Jan 2026 15:57:32 +0900 Subject: [PATCH 2/5] Update author to inariku --- frontend-design/POWER.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend-design/POWER.md b/frontend-design/POWER.md index 56066a7..b08bb2a 100644 --- a/frontend-design/POWER.md +++ b/frontend-design/POWER.md @@ -3,7 +3,7 @@ name: "frontend-design" displayName: "Frontend Design" description: "Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Guides bold design choices with memorable typography, color, and motion." keywords: ["frontend", "design", "ui", "css", "aesthetics", "web", "react", "tailwind"] -author: "Anthropic (adapted for Kiro)" +author: "inariku" --- # Frontend Design From ad64d4ee974d0f76846ee133b884b83978028148 Mon Sep 17 00:00:00 2001 From: Riku Inada Date: Mon, 12 Jan 2026 17:00:14 +0900 Subject: [PATCH 3/5] Add frontend-design to README --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 3857e72..6034fa6 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,13 @@ Documentation is available at https://kiro.dev/docs/powers/ --- +### frontend-design +**Frontend Design** - Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Guides bold design choices with memorable typography, color, and motion. + +**MCP Servers:** None (Knowledge Base Power) + +--- + ### figma **Design to Code with Figma** - Connect Figma designs to code components - automatically generate design system rules, map UI components to Figma designs, and maintain design-code consistency. From 865c851cefdc5f2fc6aa63d72adfa3af9633c40b Mon Sep 17 00:00:00 2001 From: Riku Inada Date: Wed, 14 Jan 2026 15:33:36 +0900 Subject: [PATCH 4/5] Add license, attribution, and publication-ready documentation to frontend-design power --- frontend-design/POWER.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend-design/POWER.md b/frontend-design/POWER.md index b08bb2a..d27d823 100644 --- a/frontend-design/POWER.md +++ b/frontend-design/POWER.md @@ -169,3 +169,11 @@ Remember: Extraordinary creative work is possible. Don't hold back - show what c ## Learn More See the [Frontend Aesthetics Cookbook](https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb) for detailed guidance on prompting for high-quality frontend design. + +## Attribution + +This power is inspired by and builds upon concepts from the [Frontend Aesthetics Cookbook](https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb) by Anthropic, which is licensed under the MIT License. + +--- + +**License:** MIT From 787c24b7d3cd41290cf68450997d2798516feccf Mon Sep 17 00:00:00 2001 From: Riku Inada Date: Wed, 14 Jan 2026 17:14:03 +0900 Subject: [PATCH 5/5] Update frontend-design author to AWS --- frontend-design/POWER.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend-design/POWER.md b/frontend-design/POWER.md index d27d823..1173fb1 100644 --- a/frontend-design/POWER.md +++ b/frontend-design/POWER.md @@ -3,7 +3,7 @@ name: "frontend-design" displayName: "Frontend Design" description: "Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Guides bold design choices with memorable typography, color, and motion." keywords: ["frontend", "design", "ui", "css", "aesthetics", "web", "react", "tailwind"] -author: "inariku" +author: "AWS" --- # Frontend Design