A token-efficient design skill collection for Claude. Seven focused skills that teach Claude how to design the things you actually build — websites, app UIs, videos, slide decks, long-form documents, dashboards, and social media content.
Built for Claude Code (CLI, desktop, IDE extensions) and compatible with Claude Desktop via per-skill ZIP uploads.
If you paste the same design context into every session, you're paying for it every time. Skills load metadata at session start and only pull in full instructions when Claude actually needs them. Smaller sessions, lower usage, same output quality.
| Skill | What it does |
|---|---|
animation-studio |
Motion graphics, cinematic video, camera systems, rendering (Remotion-aware) |
frontend-design |
Web and app UI components, layouts, interactions (React + Tailwind) |
web-app-scaffold |
Full app bootstrapping — project structure, routing, state, deployment |
presentation-design |
Slide decks, pitch decks, keynote talks, speaker notes |
document-design |
Long-form reports, whitepapers, PDFs, print typography |
data-visualization |
Chart selection, dashboard design, honest data display |
social-media-design |
Platform specs, aspect ratios, thumb-stopping layouts |
Each skill is a folder with a SKILL.md plus reference files. Claude reads the description at session start, pulls in the rest only when your request matches.
/plugin install FuFicFac/design-studioFrom a Claude Code session (CLI, desktop app, or IDE extension). All seven skills register together.
Pick one, not all:
npx skills add FuFicFac/design-studio@animation-studio
npx skills add FuFicFac/design-studio@frontend-design
# ... etcClaude Desktop requires per-skill ZIP uploads via Customize → Skills. Grab the ZIPs from the latest release, then upload each one you want.
Requires code execution to be enabled in Desktop settings.
You don't invoke these skills manually. Just describe what you want to build:
- "Help me design a landing page for a coffee shop" →
frontend-designloads - "I need a 10-slide pitch deck for a seed round" →
presentation-designloads - "Add a camera zoom to this Remotion scene" →
animation-studioloads
Claude reads skill descriptions and picks the right one based on what you said.
design-studio/
├── .claude-plugin/
│ └── plugin.json # Claude Code plugin manifest
├── README.md
├── LICENSE
├── skills/ # Seven self-contained skill folders
│ ├── animation-studio/
│ ├── frontend-design/
│ ├── web-app-scaffold/
│ ├── presentation-design/
│ ├── document-design/
│ ├── data-visualization/
│ └── social-media-design/
└── dist/ # Per-skill ZIPs for Claude Desktop upload
These skills from the community pair well with Design Studio and fill specific gaps:
| Skill | Author | What it adds |
|---|---|---|
| Emil Design Eng | @emilkowalski | Motion science — exact easing curves, spring physics, gesture handling, duration rules. Goes deeper than animation-studio on craft. |
| Impeccable /polish | @pbakaus | Systematic pre-ship audit — alignment, spacing, contrast, interaction states, copy, accessibility. Run this last. |
| Impeccable /typeset | @pbakaus | Typography diagnosis — font choices, hierarchy, line length, contrast. Surgical pass on type only. |
| Taste (Frontend) | @leonxlnx | Anti-AI-slop rules — bans gradient text, neon glows, Inter-on-everything. Keeps output from looking generated. |
| Taste (High-End Visual) | @leonxlnx | Premium, minimal visual patterns — asymmetric layouts, Bento paradigm, spring motion. |
| Taste (Redesign) | @leonxlnx | Audits existing UI and upgrades without rewriting — useful for iterating on what's already built. |
These are not bundled here and are not affiliated with this project. Credit to their authors.
This collection draws on established design principles from across the field — typography (Bringhurst, Müller-Brockmann), motion design, data visualization (Tufte), and accessibility standards (WCAG). The skill format and token-efficiency approach are specific to Claude Code's architecture. The design knowledge itself belongs to the craft.
MIT — do what you want. Attribution appreciated but not required.
Built by Ekello Harrid. Reach out: github.com/FuFicFac