Use the prompt

design-system.prompt.md is not meant to replace your product request. It is meant to constrain it.

The best pattern is:

1. Start with your actual task.
2. Add the extracted prompt artifact as design-system context.
3. Tell the model what file or component to build.
4. Tell it to stay close to the request and not embellish.

What to give the model

At minimum, include:

• your product task
• design-system.prompt.md
• tailwind-theme.css
• the target file path or component name

If you want a stricter result, also include design-system.json.

Recommended prompt shape

Build the settings page for our app.

Requirements:
- Use shadcn components.
- Use the provided Tailwind theme variables and semantic classes.
- Do not use arbitrary hard-coded color or spacing values.
- Stay close to the request. Do not add extra sections or features.

Design system context:
[paste design-system.prompt.md]

What good usage looks like

• Use it to steer implementation.
• Pair it with a concrete product task.
• Keep your ask narrow.
• Prefer "update this page" or "build this component" over "design something cool."

What bad usage looks like

• Treating the prompt artifact as the only task input.
• Asking the model to invent new product structure without need.
• Letting the model ignore your existing component library.
• Omitting tailwind-theme.css and then expecting semantic classes to work.

Practical rule

The prompt artifact should narrow the model's design choices, not widen them.

If the model starts adding decorative sections, extra dashboards, or invented flows, your request is too open or the prompt artifact is being used without a concrete implementation task.