| name | designtools |
| description | Entry point for the designtools suite. Use whenever a designer asks to create, build, edit, run, preview, share, or deploy a project, demo, mockup, or proof of concept. Checks the environment, routes to the other designtools- skills, and sets the rules for working with non-technical designers. Read this first for any designtools request. |
The designtools suite
This suite lets MxM designers with no coding skills take an idea to a deployed, shareable project by prompting. Claude does the technical work; the designer art-directs. Every other designtools- skill assumes the rules in this file.
Configuration
Fill these in once and keep them current. The other skills reference them by key.
| Key | Value |
|---|
| GITHUB_ORG | madebymany |
| VERCEL_TEAM | madebymany |
| DEFAULT_BRAND | #243839 |
The stack (fixed, do not ask)
Vite + React + TypeScript SPA. Base UI primitives. Vanilla CSS with CSS Modules and generated design tokens. No Tailwind, no ShadCN, no Radix. Lucide icons, never emojis. motion for animation. react-router for screens. pnpm. GitHub for persistence, Vercel for hosting. The design system is carried as designtools-core (pinned manifest, base.css) plus the designtools-tokens generator and designtools-frontend's conventions, and each project is generated fresh from them. There is no starter repo to clone. Never scaffold from memory or npm create.
Detect the surface
Work out where you are before routing:
- Desktop (default). You have a local filesystem and can run commands on the designer's Mac (Claude Code desktop app or CLI). Full experience: local dev server, live preview in the app, deploy from the machine.
- Web / cloud sandbox. You are in a cloud environment with a GitHub repo cloned (claude.ai/code). No local machine. The preview is a Vercel URL per push, not localhost.
- Artifact. You are in a chat with no project filesystem, or the designer explicitly wants a quick throwaway sketch. Single-file HTML only. See "Artifact mode" in designtools-start.
If genuinely unsure, ask one question: "Are you in the Claude Code app with a project folder open, or on claude.ai?"
Route the request
| The designer wants to | Use |
|---|
| Set up a new laptop, or first ever run on desktop | designtools-setup |
| Start a new project | designtools-start |
| Build or change screens, components, styles | designtools-frontend |
| Realistic content or live data | designtools-data |
| See it running, fix something broken, undo | designtools-run |
| A shareable link, or to publish | designtools-deploy |
| A new or adjusted colour palette or theme | designtools-tokens |
| Dial in an exact visual value (shadow, spacing, radius) by eye | designtools-surface |
On desktop, before designtools-start on a machine you have not seen working this session, run designtools-setup's doctor script silently. If it fails, do setup first. designtools-start generates every project from designtools-core; there is no template to fetch.
Surface is the one hand tool in the suite: a deterministic visual editor for the precise visual calls where a slider beats a sentence. Reach for it only after describing a value in prose has failed a couple of times, and never for structure, copy or logic. Two suite-wiring notes (the surface skill itself is generic — it works standalone, so this orchestration lives here, not in it):
- The dev loop stays designtools-run's job. Surface attaches to a dev server that is already running; don't have it start or manage the server. If nothing is running yet, that's designtools-run.
- Re-theming is designtools-tokens' job. Changing the brand colour or the whole palette means regenerating tokens, not nudging colour swatches in Surface. Surface is for the one-off visual call, not for re-theming.
Working with designers
These rules apply across the whole suite.
- Plain language, always. Say "the header", not "Header.tsx". Say "saved a checkpoint", not "committed".
- Never show a stack trace, terminal error, or raw log. Fix it, or describe the problem in one sentence along with what you are doing about it.
- Never ask them to run a command or edit a file. You do it.
- One question at a time, and only when you genuinely cannot proceed without an answer.
- Describe changes by what they will see: "the buttons are now your brand teal, take a look."
- Checkpoint constantly (designtools-run) so "undo" is always cheap and safe.
Boundaries
Stop and say so, in plain terms, when a project needs any of: user accounts or login, saving real user data, payments, a database or server, real customer or personal data, or an API key in the browser. These are the edges of the suite. Offer the honest next step: pair with an engineer, or move to a production build outside this suite. Do not bolt a backend onto a project.
The repo is the record; the deploy is the demo.
