Frontend Design
This is Anthropic's official frontend design skill, adapted for Open Design. It's what you use when you want Claude to build actual production interfaces, not generic SaaS templates with purple gradients and blob decorations. The workflow pushes you to pick a specific aesthetic direction first, then build working HTML/CSS/JS or framework code with real interaction states, honest content, and accessible markup. It enforces visual craft through typography, color, and layout rules, and integrates with Open Design's brand system when present. The self review checklist is particularly good: it catches responsive breakage, missing focus states, and AI slop patterns before you ship.
- install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
- 45
- skills.sh installs
- 5K
- GitHub stars
- 106.9K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add nexu-io/open-design --skill frontend-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
frontend-design
Adapted from Anthropic's official
frontend-designskill for OpenDesign.
Use this skill when the user asks to build or improve a frontend interface: a website, landing page, dashboard, application screen, HTML/CSS artifact, React/Vue/Svelte component, or a visual redesign of an existing UI.
The goal is not just "make it nicer." The goal is to ship working frontend code with a clear design point of view, strong craft, and enough product detail that the result feels designed for the user's actual context.
Workflow
- Understand the brief before choosing the look.
- Identify the audience, primary job, domain, and emotional tone.
- Note any technical constraints: framework, existing styles, accessibility, performance, export target, or responsive requirements.
- If the repo already has design tokens, components, screenshots, or a
DESIGN.md, use those as the source of truth.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/nexu-io/open-design
- Categories
- Frontend Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from nexu-io/open-design
All 217- Web Design Guidelines4.1K
- Creative Director3.6K
- Design Brief3.6K
- Threejs3.5K
- Apple Hig3.4K
- Pptx Html Fidelity Audit3.3K
- Design Review3.3K
- Design Md3.3K
- D3 Visualization3.3K
- Hatch Pet3.2K
- Frontend Skill3.2K
- Data Report3.2K
- Copywriting3.2K
- Color Expert3.1K
- Docx3.1K
- Pdf3.1K
- Brand Guidelines3.1K
- Ui Skills3.1K
- Pptx3.1K
- Flutter Animating Apps3.1K
- Canvas Design3.1K
- Remotion3.1K
- Plan Design Review3K
- Pptx Generator3K
Recommended
More Frontend Development
angular-developerangular/angularGenerates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices o4.9Kskills.sh installs
vue-expertjeffallan/claude-skillsBuilds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR/SSG projects, sets up Pinia stores, scaffolds Quasar/Capacitor mobile apps, impleme4.7Kskills.sh installs
tailwind-design-systemgiuseppe-trisciuoglio/developer-kitSkill for creating and managing a Design System using Tailwind CSS and shadcn/ui. Use when defining design tokens, setting up theming with CSS variables, buildi4.7Kskills.sh installsreact-code-reviewgiuseppe-trisciuoglio/developer-kitProvides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, perfor4.5Kskills.sh installs
ui-typographybencium/bencium-marketplaceProfessional typography rules for UI design, web applications, software interfaces, and all screen-based text. Enforces timeless typographic correctness that LL4Kskills.sh installsnextjs-app-routergiuseppe-trisciuoglio/developer-kitProvides patterns and code examples for building Next.js 16+ applications with App Router architecture. Use when creating projects with App Router, implementing4Kskills.sh installs