Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
163K starsSource terms (see LICENSE.txt)design-creative
$ npx skills add anthropics/skills --skill frontend-designDesign, build, test, and ship interfaces
A complete stack for agents that turn product briefs or Figma designs into polished frontend code, review the result, test it in a browser, and prepare a safe deployment.
Built for Product, design, and engineering teams shipping high-fidelity web interfaces with AI agents.
Outcomes
Workflow map
Choose an intentional visual direction and capture the product constraints before coding.
Translate Figma or a brief into accessible components and production-ready frontend code.
Audit interface quality, React performance, and real browser behavior before release.
Create a preview deployment only after the target project and configuration are reviewed.
Recommended stack
Ranked by workflow relevance, quality score, GitHub adoption, and maintenance freshness.
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
$ npx skills add anthropics/skills --skill frontend-designReview UI code for web interface guidelines, UX quality, accessibility, and interaction design best practices.
$ npx skills add vercel-labs/agent-skills --skill web-design-guidelinesTranslate Figma designs into production-ready UI code with close visual fidelity and component-level detail.
$ npx skills add openai/skills --skill figma-implement-designDesign and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
$ npx skills add Leonxlnx/taste-skill --skill design-taste-frontendApply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
$ npx skills add anthropics/skills --skill brand-guidelinesReact and Next.js performance guidance for writing, reviewing, and refactoring production UI code.
$ npx skills add vercel-labs/agent-skills --skill vercel-react-best-practicesUse Playwright to interact with and test local web applications, capture screenshots, debug UI behavior, and inspect browser logs.
$ npx skills add anthropics/skills --skill webapp-testingCreate original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
$ npx skills add anthropics/skills --skill canvas-designIdeal for
Avoid when