Skip to content
Get packs

Stack for designers

The designer's AI stack

A stack for product, UI and brand designers who want AI to speed up exploration without producing generic "AI slop". Sketch and diagram for free, give your coding agent design skills and a brand DESIGN.md, turn screenshots into working front-end code, then polish assets with our browser tools.

Open source
14
Agent skills
2
Browser tools
5
Total pieces
27
Download stack kit

ZIP: setup README, install helper, the skill folders (with licences) and free prompts.

How it connects

  1. 01

    Sketch the flow

    Rough the screens and journey in Excalidraw or as a Mermaid diagram — paste either into your agent as context.

  2. 02

    Set the brief

    Add a DESIGN.md (from awesome-design-md or your own) and install the design skills so the agent follows your taste.

  3. 03

    Build with components

    Ask the agent to implement with shadcn/ui + Tailwind, or start from a screenshot with screenshot-to-code; review in Storybook.

  4. 04

    Polish and export

    Check contrast, tune the palette, optimise SVGs and compress images with the browser tools, then ship.

1 · Think and sketch

Fast, free canvases for flows, wireframes and diagrams that the whole team (and your agent) can read.

ExcalidrawOpen sourceHand-drawn whiteboard for wireframes and flows; export PNG/SVG or embed it in your own tools.★ 135k · MITMermaidOpen sourceWrite diagrams as text — perfect for asking an agent to draft a flow you then refine.★ 91k · MITReact FlowOpen sourceNode-based canvases if you prototype interactive flow builders.★ 38.9k · MITFigmaAI toolWhere most teams finalise UI — pair it with the skills below for hand-off.FreemiumStitchAI toolGenerate first-draft UI screens from a prompt to react to.FreePenpotAI toolOpen-source design tool if you want to self-host your design files.Open source

2 · Give your agent design taste

Agent skills and design-system files that make Claude Code, Cursor or Codex produce on-brand, non-generic UI.

UI UX Pro MaxOpen sourceA design-intelligence skill: styles, palettes, font pairings and UX rules your agent applies when building UI.★ 144k · MITTaste SkillOpen sourceArt-direction and reference-image skills so agent output has a point of view.★ 108k · MITHallmarkOpen sourceAnti-"AI slop" design skill for Claude Code, Cursor and Codex.★ 45.5k · MITSkillsOpen sourceSkills for designers and engineers working on interaction detail.★ 52.9k · MITAwesome DESIGN.mdOpen sourceDESIGN.md files describing popular brand design systems — drop one in your repo as a style brief.★ 125k · MITImpeccable Frontend Design SkillAgent skillImpeccable: design, redesign, critique and polish UI with a senior designer's rules.Agent skill · Apache-2.0Frontend DesignAgent skillAnthropic's frontend-design skill for distinctive, production-grade interfaces.Agent skill · Apache-2.0UUI implementation briefPromptPrompt that turns a design into a precise brief an agent can implement.Free prompt

3 · Build the UI

Accessible component foundations, utility CSS and motion libraries that agents know well.

shadcn/uiOpen sourceCopy-paste, accessible components you own — the default choice for agent-built React UIs.★ 127k · MITTailwind CSSOpen sourceUtility-first CSS; easiest styling system for agents to read and edit.★ 98.3k · MITScreenshot to CodeOpen sourceTurn a screenshot or mock into HTML/Tailwind/React to start from.★ 81k · MITMotionOpen sourceProduction-grade animation for React and JavaScript.★ 34.8k · MITLottieOpen sourceShip After Effects animations natively on the web and mobile.★ 32.3k · MITStorybookOpen sourceDocument and review components in isolation before handing off.★ 91.4k · MIT

4 · Polish and ship assets

Free, private browser tools for the last mile: colour, contrast, icons and image weight.

CColor Palette GeneratorBrowser toolGenerate and lock palettes, export as CSS variables or Tailwind.CContrast CheckerBrowser toolCheck WCAG AA/AAA contrast before you ship.SSVG OptimizerBrowser toolStrip editor junk from exported SVGs.IImage CompressorBrowser toolCompress mockups and marketing images without uploading them.FFavicon GeneratorBrowser toolEvery favicon size plus the manifest in one ZIP.SplineAI toolLightweight 3D scenes for hero sections.FreemiumBBrand campaign visual systemPromptPrompt system for consistent campaign visuals across image models.In a pack

Setup checklist

  • Install Claude Code, Cursor or Codex (any SKILL.md-compatible agent)
  • Copy the design skills into ~/.claude/skills (the kit's install.sh does this)
  • Add a DESIGN.md to your project root
  • Create a Next.js or Vite app and run `npx shadcn@latest init`
  • Bookmark the contrast checker and palette generator