# Claude Design upload bundle — Vercel landing (vercel.com)

This bundle was generated by anydesign for use with **Claude Design**
(claude.ai/design). Each file targets one of Claude Design's setup inputs.

## Files in this bundle

- **`brand-kit.pptx`** — primary asset. A multi-slide deck covering atmosphere, palette, typography, components, and Do's/Don'ts. Claude Design ingests PPTX directly.
- **`brand-overview.docx`** — the full `design.md` rendered as a Word document. Use it as the brand brief.
- **`tokens.css`, `tailwind.config.ts`** — drop into an empty repo (or your design-tokens repo) and link the repo to Claude Design. Its system extractor reads CSS custom properties and Tailwind configs.

## How to upload

1. Open **claude.ai/design** and create a new project (or open Settings → Design system).
2. In the **brand and product assets** section, upload:
   - `brand-kit.pptx`
   - `brand-overview.docx`
   - For the code-repo path: push `tokens.css` and/or `tailwind.config.ts` to a small repo and link it under **Code repository**.

3. Let Claude Design extract the system. Review the detected colors, typography, and components — adjust where needed.
4. Future projects in this organization will default to this system.

## Troubleshooting

- If Claude Design's extracted palette differs from your tokens, re-upload the PPTX first (richest visual context) and use the **Remix** button.
- If colors come through but typography doesn't, the font family in the bundle is a fallback chain — name the exact font in the design-system setup notes.
- **Chinese (CJK) text renders in the wrong font / shows non-Simplified glyphs:** the cloud render environment may not ship the CJK fonts in the fallback chain. The bundle's font stacks already prioritize `Noto Sans SC` (cloud-friendly) ahead of local-only fonts like `PingFang SC`. To guarantee it, load Noto Sans SC explicitly in the generated HTML `<head>`:

  ```html
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
  ```

- The DTCG `design-tokens.json` from anydesign is the canonical source. If Claude Design ever supports DTCG natively, you can drop it in directly.

---

*Generated by [anydesign](https://github.com/uxKero/anydesign) · `scripts/export_for_claude_design.py`*
