📑 Table of Contents

  1. Tool 1: Superdesign

  2. Tool 2: DESIGN.md

  3. Tool 3: Rork

  4. Tool 4: Tokens Studio

  5. Tool 5: Genpire

  6. Daily workflow

  7. Tips

  8. Troubleshooting

  9. Quick reference

🧠 Tool 1 — Superdesign

What it is: The first open source design agent that lives inside your IDE. It turns natural language into UI mockups, reusable components, and wireframes without leaving your editor. Built by AI Jason, MIT licensed, around 6.5k GitHub stars at time of writing.

Why it hits: It generates design options in parallel, so you explore ten directions instead of committing to one. Designs save locally in your repo under Git control, not on someone else's server.

🛠️ Installation (all platforms)

Superdesign is an editor extension, so install is the same across Mac, Windows, and Linux. It is the IDE that differs.

VS Code / Cursor / Windsurf:

  1. Open the Extensions marketplace in your editor

  2. Search for SuperDesign

  3. Click Install

  4. Open the SuperDesign sidebar panel

Claude Code: Initialise the extension and it adds Cursor / Claude Code rules so you can prompt the agent to design and preview in the Superdesign canvas.

🔧 Setup step by step

  1. Install the extension from the marketplace

  2. Open the SuperDesign sidebar panel

  3. Set your AI model provider and paste your API key

  4. Open the canvas with cmd + shift + p → superdesign: open canva

  5. Type a prompt describing the screen you want

  6. View the generated mockups, fork the ones you like, tweak, and paste into your project

❝

⚠️ Running the agent uses your own AI API credits. The tool is free and open source, but the model calls cost money. Watch your usage.

Optional, for Cursor: Copy the prompt in design.mdc and create a custom mode in Cursor with that same system prompt for better results.

Local model option: Select OpenAI as the provider, put any value in the API key field, and point the OpenAI URL field at your local server (for example http://127.0.0.1:1234/v1 for LM Studio).

✍️ Prompts to use it

Generate a screen

Design a modern login screen with a centered card, soft shadow, and a teal primary button

Generate a component

Create a reusable pricing card component with a title, price, feature list, and CTA button

Iterate on existing UI

Take this component and make the layout more compact with tighter spacing and rounded corners

🧩 Tool 2 — DESIGN.md

What it is: A library of hundreds of free design systems packaged as a single DESIGN.md file your AI coding tool reads to build consistent UI. The format is an open standard. You browse, download a file, drop it in your repo, and your AI styles everything to match.

Why it hits: No setup, no config. The whole install is dragging one markdown file next to your README.md. It works with Claude Code, Cursor, Antigravity, and any AI coding tool.

🛠️ Three ways to use it

Option A — Manual (zero tooling):

  1. Browse the library at designmd.ai/explore

  2. Download any design system as a DESIGN.md file

  3. Drop the file into the root of your repo, next to README.md

  4. Tell your AI: "Use the @DESIGN.md file and style my app"

Option B — CLI (zero context overhead):

Install globally with npm. Works on Mac, Windows, and Linux.

npm install -g designmd

Set your free API key (create one at designmd.ai/api-keys), then add it to your shell:

export DESIGNMD_API_KEY=dk_your-key-here

Add that line to your ~/.zshrc or ~/.bashrc so it persists.

Option C — MCP (auto discovery):

Adds about 2K tokens of context. For Claude Code:

claude mcp add -s user designmd -e DESIGNMD_API_KEY=dk_your-key-here -- npx designmd-mcp

For Cursor and others, add to your MCP config file:

{
  "mcpServers": {
    "designmd": {
      "command": "npx",
      "args": ["designmd-mcp"],
      "env": {
        "DESIGNMD_API_KEY": "dk_your-key-here"
      }
    }
  }
}
❝

⚠️ Searching and browsing tags work without an API key. Downloading, viewing, uploading, and deleting all require a free key.

✍️ Prompts to use it

Find and apply (MCP or CLI agent)

Search DESIGNmd for a minimal SaaS design system with Tailwind colors, download it, and save as DESIGN.md

Apply a downloaded file

Use the @DESIGN.md file and restyle the entire app to match it

📱 Tool 3 — Rork

What it is: An AI platform that turns plain English into real, native mobile apps you can publish to the App Store and Google Play. Co founded by Levan Kvirkvelia and Daniel Dhawan. Rork raised a $15M seed round led by Left Lane Capital, announced April 2026.

Why it hits: Most AI app generators stop at web apps. Rork is built for mobile from day one. It has two modes. Rork Pro builds cross platform apps with React Native and Expo, the same production framework behind Discord, Shopify, and Coinbase. Rork Max builds native SwiftUI apps compiled with Xcode in the cloud, and can target iPhone, iPad, Apple Watch, and Vision Pro.

🛠️ Getting started (browser based, no local install)

Rork runs in the browser, so there is no OS specific install. The flow is the same everywhere.

  1. Go to rork.com and sign in

  2. Describe your app idea in plain English in the chat

  3. Watch Rork generate a real, working mobile app

  4. Test it instantly on your phone or in your browser

  5. Iterate by chatting, then prepare for App Store or Google Play submission

🔧 Choosing your mode

Mode

Stack

Runs on

Price (verify current)

Rork Pro

React Native + Expo

iOS, Android, web

Around $25 to $100/mo

Rork Max

Native SwiftUI, compiled with Xcode

iPhone, iPad, Apple Watch, Vision Pro

Around $200+/mo

❝

⚠️ Pricing tiers vary and have changed over time. I believe a free tier exists alongside paid plans, but confirm the live pricing page before subscribing.

✍️ Prompts to use it

Start an app

Build a minimalist habit tracker app with daily streaks, a clean home screen, and dark mode

Iterate

Add a calendar view and a settings screen with notification toggles

Polish

Make the onboarding flow three screens with a progress indicator and a skip button

🎛️ Tool 4 — Tokens Studio

What it is: A design system platform that automates design tokens and keeps them in sync across design and code. The Figma plugin has around 300k users at time of writing. Open source at its core and tool agnostic.

Why it hits: It works with Figma, Penpot, GitHub, VS Code, Framer, and Style Dictionary, with no vendor lock in and no proprietary format. Define a token once and it propagates everywhere. Teams like Babbel and TomTom run their systems on it.

🛠️ Installation

This is a plugin and platform, not a terminal tool. Install path depends on where you work.

Figma plugin:

  1. Open Figma

  2. Go to the Community plugins and search for Tokens Studio for Figma

  3. Install and run it from the plugins menu

  4. Start a free trial or log in to the Studio platform

Code side (Style Dictionary): Tokens Studio exports to Style Dictionary, which you install in your project with npm. Check the official docs at docs.tokens.studio for the current setup, since the integration evolves.

🔧 Setup step by step

  1. Install the Tokens Studio plugin in Figma

  2. Create your token sets (color, typography, spacing, sizing, opacity)

  3. Group tokens into themes and modes (for example brand modes, light and dark)

  4. Connect a GitHub repo or use the Studio platform to sync tokens to code

  5. Export to your targets (Figma, GitHub, Supernova, Style Dictionary)

❝

⚠️ Token architecture decisions are hard to undo later. Plan your naming and theme structure before you scale past a few dozen tokens.

✍️ How a real team uses it

  • Designer defines a color.primary token in the plugin

  • Token syncs to the connected GitHub repo

  • Developers pull the same value into code through Style Dictionary

  • One source of truth, no manual copy paste between design and code

🧵 Tool 5 — Genpire

What it is: An AI tech pack generator. You describe a product or upload a sketch, and it produces factory ready tech packs with measurements, a bill of materials (BOM), and construction notes, then matches you to a manufacturer. Pricing starts at $14.90/mo on the Go plan.

Why it hits: Most AI design tools stop at a pretty image. Genpire goes from prompt to factory ready specs to manufacturer outreach in one platform. It claims to replace the $300 to $1,500 per product freelance tech pack designer cost, and supports 11+ verticals including apparel, footwear, jewelry, furniture, home goods, and beauty.

🛠️ Getting started (browser based, no local install)

Genpire runs in the browser. No OS specific install.

  1. Go to genpire.com and create an account

  2. Choose your product category (apparel, footwear, jewelry, and more)

  3. Describe your product in plain English or upload a sketch

  4. Let the AI generate the visual, then the tech pack

  5. Refine silhouette, color, material, or detail with prompts or manual edits

  6. Export the tech pack and send RFQs to matched manufacturers

🔧 The end to end flow

Step

What you do

What Genpire does

Generate

Prompt or sketch each piece

Creates visuals and variations

Edit

Align trims, palette, silhouette

Applies edits across the design

Tech pack

Request specs per SKU

Generates measurements, BOM, construction notes, flats

Source

Compare options

Matches manufacturers; filter by MOQ, certifications, lead time

Sample

Iterate and lock

Exports to PDF and Excel for the factory

❝

⚠️ AI drafts the technical work, but it does not replace creative direction or production judgment. Treat the generated tech pack as a strong first draft, then verify measurements and tolerances before committing to a bulk order.

✍️ Prompts to use it

Generate a product

A black oversized hoodie, heavyweight cotton fleece, kangaroo pocket, ribbed cuffs, dropped shoulders

Refine

Make the fit more cropped, switch to a half zip, and add a tonal embroidered logo on the chest

🔁 Daily workflow

How these stack in a real build, from idea to shippable.

  1. Design the UI. Open Superdesign in your IDE, prompt a few screen options, fork the best one

  2. Lock the system. Grab a DESIGN.md from designmd.ai (or define tokens in Tokens Studio) so every screen stays consistent

  3. Ship the app. Take the direction into Rork, describe the app, test on your phone, prepare for the App Store

  4. Manufacture the product. If you are building physical goods, run the concept through Genpire to get a factory ready tech pack and a manufacturer match

Software builders live in tools 1 through 4. Physical product founders lean on Genpire. The through line is the same: prompt in, production grade artifact out.

💎 Tips

  • Superdesign saves locally in .superdesign/. Commit that folder to Git so your design history is versioned alongside your code

  • Generate in parallel. Superdesign's whole point is exploring ten options, not one. Prompt for variations, then fork

  • DESIGN.md CLI beats MCP for context. MCP adds about 2K tokens to every conversation. The CLI costs tokens only when a command actually runs. Use the CLI if your context window is tight

  • Rork Pro vs Max is a real fork in the road. Pro (React Native and Expo) covers iOS, Android, and web. Max (SwiftUI) is Apple only but goes deeper into native Apple platforms. Pick based on where your users are, not on price alone

  • In Tokens Studio, name tokens before you scale. A clean naming convention early saves a painful rename later when hundreds of tokens reference each other

  • Genpire is a first draft engine. It drafts roughly the first 60% of the technical work and reduces errors in the rest, but a human still verifies tolerances and construction for production

⚡ Quick reference

SUPERDESIGN (IDE design agent, open source, MIT)
  Install: marketplace -> search "SuperDesign" -> Install
  Open canvas: cmd + shift + p -> superdesign: open canva
  Designs save in: .superdesign/
  Cost: free tool, you pay your own AI API credits

DESIGN.md (design system files for AI coding tools)
  Manual: download a DESIGN.md, drop next to README.md, prompt your AI
  CLI:  npm install -g designmd
        export DESIGNMD_API_KEY=dk_your-key-here
        designmd search "dark fintech"
        designmd download shafius/neon-fintech
        designmd upload ./DESIGN.md --name "My Kit" --tags dark,saas
  MCP (Claude Code):
        claude mcp add -s user designmd -e DESIGNMD_API_KEY=dk_your-key-here -- npx designmd-mcp

RORK (AI native mobile apps, browser based)
  Pro: React Native + Expo -> iOS, Android, web (~$25-$100/mo)
  Max: SwiftUI compiled with Xcode -> iPhone, iPad, Watch, Vision Pro (~$200+/mo)
  Flow: sign in -> describe app -> test on phone -> ship to stores

TOKENS STUDIO (design tokens, ~300k Figma users)
  Install: Figma Community plugin "Tokens Studio for Figma"
  Works with: Figma, Penpot, GitHub, Style Dictionary
  Flow: define tokens -> group into themes/modes -> sync to code -> export

GENPIRE (AI tech packs, browser based, from $14.90/mo)
  Flow: pick category -> prompt or sketch -> generate visual -> generate tech pack
        -> refine -> export PDF/Excel -> match manufacturer
  Output: measurements, BOM, construction notes, flats

By The AI Leverage - Learn and master AI daily

Keep Reading