Build a Design-System-Aware Spec and Copy Assistant

1. Go to claude.ai and sign in (or create a free account).
2. Find Projects in the left sidebar and click New project.
3. When the setup screen asks what you're working on and what you're trying to achieve, describe it plainly: "Design system documentation and specs for [your product name]."
4. Name the project something you'll recognize later, like "Design System Assistant."

What you should see: A new project workspace with a chat window and a panel for custom instructions and uploaded files. Troubleshooting: If you don't see a Projects option in the sidebar, you may be on an older account view. Check the main navigation menu or account settings for a "Projects" or "Workspaces" link.

1. Open the custom instructions field for the project (sometimes labeled "Project instructions" or found under project settings).
2. Paste a version of this, filled in with your own details:

You are a design documentation assistant for [product/company name]. Your job is to help me write component documentation, engineering handoff specs, and UX copy that stay consistent with our design system and voice.

DESIGN SYSTEM CONVENTIONS:
- Component naming follows [your pattern, e.g. Button/Primary/Large]
- Spacing uses an [8px / 4px] base unit
- States to always document: default, hover, active, disabled, error, loading
- [Add any other conventions specific to your system]

VOICE AND TONE:
- [Describe your product's voice: e.g. direct, friendly but not casual, no jargon]
- Error messages should [state the fix, not just the problem / stay under a character limit / etc.]

WHEN WRITING A SPEC:
- Include: component name, states, spacing and sizing, interaction behavior, accessibility notes (focus order, contrast, labels)
- Match the structure of the example specs I've uploaded
- Flag anything you're unsure about instead of guessing

Keep answers ready to paste into our documentation tool. no extra preamble.

1. Save the instructions.

What you should see: The instructions panel now shows your saved text, and Claude will apply it to every chat started inside this project.

1. Look for an Add content or + control near the project's knowledge or files section.
2. Upload:

   • Your design system documentation (PDF, exported doc, or plain text)
   • Two or three example specs you consider well written
   • Your voice and tone guide, if you have one
3. If a file is too large or the wrong format, export the relevant pages as a PDF or paste the key sections into a plain text file first.

What you should see: Your files listed in the project's knowledge panel, available to every chat in that project. Troubleshooting: If Claude answers generically and doesn't seem to reference your files, open a new chat inside the project. Existing chats started before you uploaded files won't automatically pick up the new content.

1. Start a new chat inside the project.
2. Ask it to document something you can check against a real answer: "Write the handoff spec for our primary button component, including all states and spacing."
3. Compare the output against your own knowledge of that component.

What you should see: A spec that follows your uploaded structure and naming conventions, not a generic template. Troubleshooting: If the output ignores your conventions, rephrase the request to explicitly point at the source: "Using the spec format from the example I uploaded, document..."

1. Whenever a component is ready for engineering, open this project and describe the component, its states, and any edge cases you know about.
2. Review the generated spec against the real design in Figma before sending it along, checking spacing values and interaction states match.
3. Copy the approved spec into your documentation tool or ticket.