Flujo de IA para Diseñadores

What's in this pack

This is the rig a working visual, product, or brand designer would assemble when AI has to live inside the design day — not the engineer-facing toolkit where the agent ships React code. Every pick here covers one rung of the designer's ladder: orchestrate the work with a designer-tuned agent, get the first mockup out of a text prompt, refine it in an editor you actually own, generate the image assets you'd normally license, package the icon library, hand off to engineering through Figma plumbing, and gate everything against a brand-consistency check before it leaves your file.

The pack assumes you live in Figma or a Figma alternative (Penpot, Open Pencil) and want AI to do the parts of the day that are mechanical — first-draft layouts, icon search, image variations, design-system documentation, brand audits — without replacing the taste decisions that are still yours.

Install in this order (research → mockup → image asset → handoff → brand QA)

1. Claude Code Agent: UI Designer (#4381) — research + orchestration. This is the designer-tuned agent that calls the MCPs below, reads design briefs, and proposes layout / hierarchy / component choices. Use as the daily entry point — every other pick gets reached through here.
2. Google Stitch MCP (#151) — AI mockup generation. Text prompt to full UI screen, editable in Stitch. Best for first-draft flows, marketing pages, and exploratory variants you wouldn't draw by hand. Connect once via MCP and the agent above can spin screens for you.
3. Open Pencil (#4720) — AI-native design editor. When Stitch's output needs hand-tuning and you don't want to round-trip back to Figma, Open Pencil is the Skia-rendered editor with native AI assistance. Open-source; pairs cleanly with the UI Designer agent.
4. Penpot (#890) — open-source design tool. The Figma alternative for teams who want self-hosting, SVG-native files, and no lock-in. Use as your primary editor or your handoff format when collaborators don't have Figma seats.
5. Together AI Image Generation (#776) — image asset gen. FLUX + Kontext models for hero images, product shots, illustrations, and texture variations. Cheaper than stock-photo subscriptions and gives you license clarity. The skill teaches Claude Code the correct parameters so the agent (#4381) can call it for you.
6. ComfyUI (#208) — node-based image generation. When Together AI's one-shot prompt isn't enough — you need ControlNet, IP-Adapter, LoRA fine-tunes, or a repeatable batch — ComfyUI is the power-user surface. Steeper learning curve; worth it for brand-consistent image production.
7. Lucide (#1009) — icon toolkit. 1,500+ minimalist SVG icons, MIT-licensed, framework-agnostic. The icon library AI scaffolders already reach for, so picking Lucide upstream means engineering doesn't have to swap icons later. Drop into Figma via the community plugin, into code via the Lucide package.
8. Talk to Figma MCP (#3241) — design-to-code handoff. Lets the engineering agent read your Figma file and round-trip edits back. From the designer's side, this is how your file becomes the source of truth — not the screenshot the engineer eyeballs in Slack.
9. design-md-figma (#3599) — design system extraction. Figma plugin that exports your local styles (color, typography, spacing tokens) into a DESIGN.md / SKILL.md that any agent can consume. Without this, every AI tool guesses what your tokens mean; with it, they reproduce them.
10. Claude Official Skill: brand-guidelines (#75) — brand QA gate. Applies brand colors and typography systematically to artifacts that need to ship looking on-brand. The last step before assets leave your file — catches the off-brand AI output before it lands in a deck or marketing page.

How they fit together

   Brief / research notes
          │
          ▼
  UI Designer Agent (#4381)
          │
          │ ── reads brief, picks tools, orchestrates
          ▼
  ┌───────────────────────────────────────────┐
  │  MOCKUP                                   │
  │  Google Stitch MCP (#151)   ──┐           │
  │  (text → first-draft screen)  │           │
  │                               ▼           │
  │  Open Pencil (#4720) ◀── Penpot (#890)    │
  │  (AI-native editor)    (open-source       │
  │                         editor / handoff) │
  └───────────────┬───────────────────────────┘
                  │
                  ▼
  ┌───────────────────────────────────────────┐
  │  IMAGE ASSET                              │
  │  Together AI (#776) ──── ComfyUI (#208)   │
  │  (FLUX one-shot)         (node graph,     │
  │                           batch + control)│
  │                                           │
  │  Lucide (#1009) ◀── icon library          │
  └───────────────┬───────────────────────────┘
                  │
                  ▼
  ┌───────────────────────────────────────────┐
  │  HANDOFF                                  │
  │  Talk to Figma MCP (#3241)                │
  │  (engineer agent reads file)              │
  │                                           │
  │  design-md-figma (#3599)                  │
  │  (export tokens → DESIGN.md)              │
  └───────────────┬───────────────────────────┘
                  │
                  ▼
  brand-guidelines (#75)
  (final on-brand QA gate)
                  │
                  ▼
            Ship / publish

The critical join is UI Designer Agent + Stitch MCP + Talk to Figma MCP: the agent reads your brief, drafts mockups through Stitch, refines in your editor, then writes the result back to Figma where engineering picks it up. Skip the agent and you're driving each tool by hand; skip the Figma MCP and your hand-off goes back to red lines on a screenshot.

Tradeoffs you'll hit

• AI mockup gen vs hand-crafted layout — Stitch is fastest for explorations where the cost of a bad first draft is low (marketing variants, settings pages, internal tools). It's worst for distinctive flows where layout is the differentiator. Use it to skip the blank canvas; replace it with hand-crafted work when the screen has to feel proprietary.
• Figma plugin vs standalone editor — Talk to Figma MCP keeps you in Figma where collaboration and engineering handoff are mature. Open Pencil and Penpot are standalone editors with AI baked in. If your org runs on Figma seats, stay; if you're a solo designer or a team without Figma, Open Pencil / Penpot avoid the $15/user/month line item.
• Together AI vs ComfyUI — Together AI is one-shot prompt → image, hosted, $0.003-0.05 per image. ComfyUI is local, node-graph, free after GPU cost, and the only path for ControlNet-style precision (use this hero's pose, this product's silhouette). Start with Together AI; graduate to ComfyUI when your brand requires repeatable image production.
• Lucide vs Heroicons vs Phosphor — all three are well-maintained. Lucide is in this pack because v0 and other AI generators reach for it by default — picking it upstream means fewer icon swaps during handoff. Heroicons if you live in Tailwind UI; Phosphor if you want weight variants.
• brand-guidelines skill vs human brand review — the skill catches systematic drift (wrong primary color hex, off-brand font, inconsistent spacing). It can't catch narrative drift (tone of voice in the hero copy, photographic style, illustration mood). Run the skill to clear the mechanical violations; then a human reviews the rest.
• Penpot vs Figma vs Sketch — Penpot is the only fully open-source option here. Real teams use it because Figma's price hikes finally crossed their pain threshold, or because they need self-hosting for compliance. Functionally it's at parity for ~80% of design work; you'll miss Figma for variants, dev mode polish, and the plugin ecosystem.

Common pitfalls

• Over-relying on AI taste — Stitch, Open Pencil, and Together AI will all produce competent output that has no point of view. The faster you can ship competent design, the faster you ship competent design everywhere — which is forgettable. Use AI for the 70% mechanical scaffolding; spend the recovered time on the 30% that makes the work distinctive.
• Asset license confusion — AI-generated images sit in a moving legal landscape. Together AI's FLUX output is generally cleared for commercial use; ComfyUI's output depends on the base model and LoRAs you stack. Document model + license per asset in your design file, especially for client work where the brief specifies provenance.
• Skipping design-md-figma until "later" — without exported tokens, every AI tool guesses your color palette and your spacing scale. After two weeks the agent has invented 14 shades of "brand blue" across artifacts. Export the DESIGN.md on day one; re-export when your system actually changes.
• Treating the brand-guidelines skill as the only QA — it catches systematic violations, not narrative ones. A page can pass the brand check and still feel off-brand because the photography is generic, the copy is in the wrong voice, or the layout is the same template the competitor uses. Use it as a gate, not a green light.
• Letting Stitch output go straight to engineering — first-draft mockups from any AI tool look right at thumbnail size and fall apart at detail (alignment, hierarchy, microcopy). Always do at least one editing pass in Penpot / Open Pencil / Figma before the handoff MCP picks it up. Engineering's agent will inherit every misalignment.
• Picking the wrong editor for the team you have — Penpot self-hosting is great if you have ops support, frustrating if you don't. Open Pencil is exciting and early (#4720 has near-zero usage on TokRepo today). Figma is boring and reliable. Match tool maturity to team patience.

What this pack deliberately leaves out

There is no Adobe XD, no Sketch, no Framer Sites, no Webflow. Those are mature commercial products that don't need a curated AI pack — their own ecosystems cover the AI angle. This pack is the AI-native edge: open-source where possible, MCP-driven, with the agent as the orchestrator. If you live in Adobe Creative Cloud and pay your $60/month, that's fine — the brand-guidelines (#75) and Together AI (#776) picks still slot into your day.