Turn design intent into beautiful web deliverables, automatically.
Most AI design tools either generate generic landing pages or hand you a Figma file you still have to implement. Beautiful Studio does something different: it asks the right questions upfront, picks a real design system from a curated dataset, builds the artifact with motion and accessibility baked in, runs it through Lighthouse and a critique loop, and ships a polished HTML, slide deck, or motion-graphics video to your deliverables/ folder. You get something you can send today -- not a starting point you still have to finish.
Beautiful Studio is the sibling of BRIDGE. Same orchestration discipline. Different domain.
| You are a... | Beautiful Studio helps you... |
|---|---|
| Consultant or fractional CTO | Produce a polished architecture memo or client deck in a couple of hours instead of a couple of days |
| Solo designer or agency lead | Translate a brief into a live HTML mockup with motion + audit pass, before opening Figma |
| Founder or product manager | Build a credible product landing page with a design system instead of a Bootstrap template |
| Engineer who has to ship a deck | Get a real slide deck with keyboard nav, transitions, and good typography -- not another PowerPoint |
| Content creator | Produce an explainer or motion-graphics video from a brief, with HyperFrames and TTS |
| Educator | Build memorable workshop materials with editorial register and reading-friendly typography |
INPUT PIPELINE OUTPUT
----- -------- ------
Brief, brand voice Phase 0 : Preflight (validate tools) Beautiful HTML
Reference URLs Phase 0b : Evolution check (newer tools?) Slide deck
Mood + audience ---> Phase 1 : Discovery interrogator (one -> Motion video
Deadline Phase 2 : Router (web | doc | slides | video) with Lighthouse
Portability Phase 3 : Brand context (PRODUCT + DESIGN) scores and
constraints Phase 4 : Inspiration scout (refs + shots) critique pass
Phase 5 : Design system (font + palette)
Phase 6 : Information architecture
Phase 7 : Implementation (one of 3 specialists)
Phase 8 : Motion design
Phase 9 : Quality audit
Phase 10 : Design critique (max 3 cycles)
Phase 11 : Polish + ship
Human approval gates at every phase. Cancel any time and keep the work so far.
| Phase | What Happens | What You Get |
|---|---|---|
| 0 -- Preflight | Skills, MCPs, CLIs, vendored assets validated. Auto-Installer asks consent before any install. | pipeline/00-preflight.json, optional 00-install-log.md |
| 0b -- Evolution check | Scan npm, PyPI, GitHub, marketplaces for newer or deprecated tools. You decide what to update. | 00b-evolution-report.md, decision recorded |
| 1 -- Discovery | One interview, 8 to 12 questions, every fact downstream phases need. | 01-discovery.md (single source of truth) |
| 2 -- Route | Deterministic lookup: web, doc, slides, or video. | 02-route.json |
| 3 -- Brand context | PRODUCT.md + DESIGN.md via impeccable:teach. |
03-brand/PRODUCT.md, 03-brand/DESIGN.md |
| 4 -- Inspiration | Named references with screenshots and explicit "take from this" notes. | 04-inspiration.md + 04-shots/*.png |
| 5 -- Design system | One font pair, one palette, one style archetype - cited to ui-ux-pro-max CSV rows. | 05-design-tokens.css + 05-design-rationale.md |
| 6 -- Information architecture | Sections, hierarchy, wireframe. | 06-outline.md + 06-wireframe.md |
| 7 -- Implementation | One of three specialists: web-craft, slides-composer, video-director. | 07-build/ |
| 8 -- Motion design | motion.dev (web/doc/slides) or HyperFrames adapter (video). Reduced motion respected. | 08-motion.md |
| 9 -- Quality audit | Lighthouse + ESLint + impeccable:audit. Pass/fail with hard floors. | 09-audit-report.md |
| 10 -- Design critique | Heuristic rubric + AI-slop test. Max 3 cycles. | 10-critique.md |
| 11 -- Polish + ship | Final polish, single-file inlining if requested, screenshot battery, write to deliverables/. | deliverables/<slug> |
You control the pipeline at every step. Approve, modify, go back, or stop early.
Beautiful Studio picks one of four shapes based on what you actually need:
- web: landing pages, dashboards, single-page sites
- doc: HTML reports, memos, architecture documents (editorial register)
- slides: HTML slide decks with keyboard navigation, transitions, slide number, progress bar
- video: HTML-to-MP4 motion-graphics videos via HyperFrames
Every question gets asked in Phase 1, once. Downstream agents either work from locked facts or return ASSUMPTION BLOCKED. No mid-pipeline follow-ups. No drift.
The Inspiration Scout captures specific elements from specific sources: "Take from this: the way the hero typography breaks lines." Phase 5 picks the design system based on those notes, not generic moodboards.
Font pairings, palettes, and style archetypes come from ui-ux-pro-max's CSV data -- 57 typography pairings, 96 palettes, 67 style archetypes. Every pick cites its row number.
Modern color science. Better dark mode. Better contrast. No exception.
prefers-reduced-motion: reduce collapses every animation to 0ms. Ease-out exponential only. No bounce. No elastic.
The design critic can send the build back up to 3 times. After that, it fails loud and asks you. No silent loops.
Once per session, Beautiful Studio scans for newer or better tools and asks you what to do. It can even rewrite itself via /skill-creator -- but only with explicit consent, only with a backup, and only after a smoke test passes.
| Command | What It Does |
|---|---|
/beautiful-studio |
Start a new artifact or resume an existing one |
/studio |
Same as above (short form) |
The Orchestrator detects when you have an existing pipeline/state.json and offers to resume.
- Install Claude Code.
- Clone or download this repository.
- Place
skills/beautiful-studio/into~/.claude/skills/(or use a marketplace registration if your setup supports it). - Open a new Claude Code session and type
/beautiful-studio. - Phase 0 runs immediately. If anything is missing, you get a list of commands and a consent prompt.
- Answer the discovery questions. Approve at each gate. Get a finished deliverable.
beautiful-studio/
├── README.md
├── LICENSE
├── assets/
│ └── bmc-banner.svg
├── skills/
│ └── beautiful-studio/
│ ├── SKILL.md
│ ├── orchestrator/
│ │ ├── core.md
│ │ ├── phases/ (14 phase files)
│ │ ├── modules/ (11 module files)
│ │ ├── agents/ (15 agent definitions)
│ │ └── scripts/ (5 Python scripts)
│ ├── references/ (motion cookbook, routing, inspiration, versions)
│ └── assets/ (motion.min.js, svg-pan-zoom.min.js, fonts)
└── docs/
Beautiful Studio composes these existing Claude Code skills:
impeccable(design subcommands: teach, craft, animate, audit, critique, polish)ui-ux-pro-max(typography, color, and style data)frontend-designandfrontend-slideshyperframes,hyperframes-helper,hyperframes-cli,hyperframes-media- HyperFrames adapters:
gsap,animejs,lottie,css-animations,waapi,three,tailwind lighthouse,eslint-runner,crawl4aisuperpowers:writing-plans,superpowers:brainstormingskill-creator(for self-modification through the Evolution Watcher)
MCPs:
magic(21st.dev) - inspiration, component_builder, component_refiner, logo_searchcontext7- library docsplaywright- visual verification
MIT. See LICENSE.
Built by Jose Milton Buitron. Sibling skill of BRIDGE.