frontend-design
Tools and design philosophy for crafting memorable, unique web interfaces.
Install
mkdir -p .claude/skills/frontend-design-christophacham && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16198" && unzip -o skill.zip -d .claude/skills/frontend-design-christophacham && rm skill.zipInstalls to .claude/skills/frontend-design-christophacham
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard...Key capabilities
- →Create distinctive frontend interfaces
- →Express a clear aesthetic point of view in UI design
- →Translate design intent into production-ready code
- →Evaluate design direction using Design Feasibility & Impact Index (DFII)
- →Define purpose, tone, and differentiation anchor for interfaces
How it works
The skill enforces a design-first approach, requiring explicit aesthetic direction, evaluation via DFII, and adherence to specific execution rules before generating code.
Inputs & outputs
When to use frontend-design
- →Build memorable web UIs
- →Design intentional interfaces
- →Create cohesive design systems
About frontend-design
Enforces a design-first approach for building UI. Evaluates aesthetic impact and feasibility before writing production-ready code, prioritizing intentional design over default frameworks.
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard...
When not to use it
- →When the goal is to generate generic 'AI UI' patterns
- →When the design relies on default frameworks without intentional systems
- →When the output is only mockups, not working HTML/CSS/JS
Limitations
- →Every output must satisfy four core mandates: Intentional Aesthetic Direction, Technical Correctness, Visual Memorability, Cohesive Restraint.
- →The design must avoid generic 'AI UI' patterns.
- →The design must express a clear aesthetic point of view.
How it compares
This skill prioritizes intentional, memorable design with a clear aesthetic point of view, moving beyond default layouts and generic components.
Compared to similar skills
frontend-design side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-design (this skill) | 0 | 7mo | No flags | Advanced |
| visual-design-foundations | 5 | 6mo | No flags | Beginner |
| frontend-design-pro | 10 | 10mo | No flags | Intermediate |
| vibefigma | 0 | 8mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by christophacham
View all by christophacham →You might also like
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
frontend-design-pro
claudekit
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.
vibefigma
vibeflowing-inc
Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMA_TOKEN env var, or .env file).
design
dyeoman2
Design and restyle TanStack Start routes and React components in this repo using the March 2026 GPT-5.4 frontend guidance while preserving local conventions. Use when building or refining marketing pages, dashboards, admin surfaces, authenticated app views, page-level layouts, visual systems, or int
frontend-design
darthlinuxer
Design thinking and decision-making for web UI. Use when designing components,
design-principles
Saisagar7779
|