Design skills
56 Design skills, most installed first. I read every file in each one to see what it can access, and show the security audits from skills.sh. See all skills.
Best for Solo founders who build their own pages, diagrams and launch videos with agents
This page lists the Agent Skills I filed under design work: UI polish, design systems, diagrams, illustration and video your coding agent can render. They are sorted by total installs on skills.sh. I read every skill file by file to rate its access (Low, Medium or High), meaning what it can touch on your machine and accounts, and each page shows the skills.sh security audits.
If you build your own pages, start with Frontend Design from Anthropic. Its access is Low, and it pushes the agent to plan a palette and type system before coding, so pages avoid the stock AI look. Pair it with Web Interface Guidelines from Vercel to audit your UI files and get file:line notes.
For launch videos, try HyperFrames, the most installed skill here. For diagrams that match your brand, Diagram Design writes one HTML file you open by double clicking.
Questions
What is the best Claude Code skill for frontend design?
Frontend Design is the most installed design skill with Low access, and it has the agent plan a small token system before coding so pages avoid the stock AI-generated look. To check UI you already have, Web Interface Guidelines reports accessibility and UX findings as file:line notes, while Impeccable and Pristine add critique and polish commands.
How do I install HyperFrames in Claude Code?
Run npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes. HyperFrames is Apache-2.0 licensed and works with Claude Code, Codex, Cursor, Gemini CLI and OpenCode.
What is the difference between HyperFrames and Remotion Best Practices?
With HyperFrames, agents write compositions as HTML with GSAP timelines and render real video with the hyperframes CLI. Remotion Best Practices is the official Remotion skill for making videos in React, and it opens a live Studio preview so you can watch and steer while it builds.
What is the difference between Archify and Diagram Design?
Archify builds clickable standalone HTML diagrams, can link nodes back to the source code of a repo, and exports to PNG, SVG, WebM or PDF. Diagram Design covers 45 diagram types as one HTML + SVG file and reads your website's palette and fonts once, so every diagram after that matches your brand.