Communitygithub.com

vinay-v-7/design-studio

Unified design system for building and reviewing clean, distinctive, non-generic interfaces: websites, landing pages, product UI, dashboards, forms, web and native app screens, HTML slide decks, and diagrams. Use whenever the user asks to design, build, redesign, restyle, polish, critique, audit or roast a UI; pick a palette, font pairing or style; says something looks generic, templated or AI-made; wants a presentation/deck in HTML; or wants an architecture, flow, sequence, ER, timeline or other diagram. Combines taste-skill art direction, Impeccable craft commands, the ui-ux-pro-max database, AI-pattern review, frontend-slides with beautiful-html-templates, and diagram-design under one anti-slop doctrine and quality gate.

What is design-studio?

design-studio is a Claude Code agent skill that unified design system for building and reviewing clean, distinctive, non-generic interfaces: websites, landing pages, product UI, dashboards, forms, web and native app screens, HTML slide decks, and diagrams. Use whenever the user asks to design, build, redesign, restyle, polish, critique, audit or roast a UI; pick a palette, font pairing or style; says something looks generic, templated or AI-made; wants a presentation/deck in HTML; or wants an architecture, flow, sequence, ER, timeline or other diagram. Combines taste-skill art direction, Impeccable craft commands, the ui-ux-pro-max database, AI-pattern review, frontend-slides with beautiful-html-templates, and diagram-design under one anti-slop doctrine and quality gate.

Works with✓Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add vinay-v-7/design-studio-skill
View original→Browse all skills

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

What does design-studio do?

<studio> is the folder that contains this SKILL.md. On Windows use python if python3 is missing, and modules/impeccable/scripts/impeccable.cmd instead of the uncooked launcher.

Load

  1. This file.
  2. Doctrine for the route: doctrine/workflow.md, doctrine/principles.md, doctrine/gate.md; doctrine/conflicts.md when modules disagree.
  3. Only the routed MODULE.md file(s) below, then the references they point at.

Never load every module. Vendored MODULE.md files are not standalone skills.

Precedence

  1. The user's explicit instruction and real brand assets
  2. The project's DESIGN.md / PRODUCT.md
  3. design-studio doctrine
  4. The active module's rules
  5. ui-ux-pro-max database picks — inputs, never decisions; every pick must pass the slop floor

Route

/design-studio <route> [target]. If no route, infer from the ask.

Intent / argLoadNotes
build — landing, marketing, portfolio, public pagemodules/taste/MODULE.md + modules/impeccable/MODULE.md (persuade)ui-ux-pro-max only for stack guidelines
app — dashboard, settings, forms, product UI, native screensimpeccable (operate) + taste references/app-screens.mdui-ux-pro-max stack + UX guidelines
direction — palette, fonts, styletaste library first; modules/ui-ux-pro-max/MODULE.md search second, slop-filteredwrites DESIGN.md
review / audit / roastmodules/ai-design-review/MODULE.md and its report formatscanners below; dedupe into IDs
polish bolder quieter typeset colorize animate harden clarify distill delight adapt onboard optimize layout overdrive shape init document extract critique audit live generateimpeccable command referencepin/unpin disabled
slides / deck / presentationmodules/slides/MODULE.mdtemplate-library/ last resort; .pptx → pptx skill
diagram (+ import mermaid|drawio|excalidraw, export)modules/diagrams/MODULE.md + commands/
charts in an appdataviz skill if installed, else ui-ux-pro-max charts domain
long-form copyai-design-review copy tells; unslop skill if installed
hooks on|off|statusimpeccable reference/hooks.mdhook policy below

Workflow

Brief (PRODUCT.md) → Direction (DESIGN.md) → Build → Look → Gate → Report. Details: doctrine/workflow.md.

Taste working files stay in .taste-skill/. Summarize the chosen direction into DESIGN.md so every module reads one file.

Gate

Done when: looked at shipping sizes; relevant scanners ran; zero P0; every P1 justified by the brief; genericness ≤ 3/10 for new UI; SD1–SD5 pass; nothing invented; app UI has empty/loading/error; report names tiers that ran. Full table: doctrine/gate.md.

Review scanners (dedupe onto catalog IDs):

node <studio>/modules/ai-design-review/scripts/scan.mjs <target> --json
<studio>/modules/impeccable/scripts/impeccable detect <target>
node <studio>/modules/taste/scripts/lint.mjs <target>

Windows detect: <studio>\modules\impeccable\scripts\impeccable.cmd detect <target>.

Hook policy

Off by default. Never enable silently.

At the start of a build or app route in a real project, run:

<studio>/modules/impeccable/scripts/impeccable hooks status

Propose opt-in, one sentence of reason, when any of: the task will touch ≥3 UI files or span sessions; a review found ≥2 mechanical P0/P1 (contrast, gradient text, glow, overflow, design-system drift); the user asks for ongoing enforcement.

Explain: per-edit scan via .claude/settings.local.json (Claude Code) or .cursor/hooks.json (Cursor). Cursor gets per-edit checks only, no Stop deep pass. Point at <studio>/modules/impeccable/scripts/impeccable.

Respect hook.consent in .impeccable/config.local.json. Do not re-ask in that project.

If they accept: impeccable hooks on. If they decline: hooks off and do not ask again there.

Environment

NeedUsed byIf missing
Node 18+scan.mjsskip scanner, say so
Node 22+taste draw / lint / inspectskip taste scripts
Python 3ui-ux-pro-max, diagram verify-geometryskip those
Chrome / Edgetaste inspect, impeccable URL detectskip visual browser tier
Playwrightslide PDF exportskip PDF
python-pptxPPT importskip import

Module map

PathRole
modules/taste/Art direction (draw.mjs), lint/inspect
modules/impeccable/Craft commands, detect, hooks
modules/ui-ux-pro-max/Searchable styles / palettes / stacks
modules/ai-design-review/Tells catalog, scan, review report
modules/slides/HTML decks; template-library/ is implementation reference
modules/diagrams/HTML/SVG diagrams

Related Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community