How long does the integration take?

Change one base URL in an OpenAI-compatible client, or install the Python or TypeScript SDK; the quickstart routes a first request in a few minutes.

Will this lock us into another vendor?

No. The router is Apache-2.0 open source, your provider keys stay yours, and the API is OpenAI-compatible, so leaving is a change of base URL.

What happens when a provider fails?

The router falls back to the next model your policy allows and records the fallback in the trace, so an outage costs a retry, not an incident.

figma-to-html - Prompt - OpenSmartRoute

Name: figma-to-html
Author: JoseCortezz25

Prompt file imported from JoseCortezz25/html-starter (.claude/commands/figma-to-html.md). Copyright stays with the author.

figma-to-html

Stack: Vite, HTML, Tailwind CSS v4 (@theme tokens + BEM @apply), GSAP, Just-validate.

ALWAYS inspect the design with the Figma Desktop MCP (figma-desktop). Never guess values.

Always read first

src/styles/main.css — the @theme { } block is the single source of truth for colors, fonts, radius, and shadows.
.claude/knowledge/critical-constraints.md
.claude/rules/styling.md and .claude/rules/html-structure.md

Process

Inspect the selected Figma frame (layout, variables, typography, spacing, assets). Take a screenshot for reference.
Decompose it into Atomic Design levels: atoms (button, input), molecules (form-field, nav), organisms (page sections). Reuse existing components in src/styles/components/** before creating new ones.
Tokens — for every Figma value:
- matching @theme variable exists → use its utility (--color-accent → bg-accent);
- reusable value without a token → add it to @theme in src/styles/main.css (Figma alias brand/red → --color-brand-red);
- one-off measurement → arbitrary utility inside @apply (tracking-[0.3em]). Never arbitrary colors.
Markup — write semantic HTML in the page file. Each component root gets data-component="<level>/<name>" and the BEM block class. No inline styles; no long utility chains.
Styles — create src/styles/components/<level>s/<name>.css with @layer components { } and @apply; register it in src/styles/main.css.
Behavior — motion → src/scripts/animations/<organism>-animation.ts (inside gsap.matchMedia()); forms → src/scripts/forms/<form-name>.ts with messages in src/scripts/messages/. Wire them in src/main.ts.
Assets — export images/icons to public/ with kebab-case English names; decorative SVGs get aria-hidden="true".
Verify — run pnpm typecheck && pnpm lint && pnpm build, then compare the page in the browser (Playwright or Chrome DevTools MCP) against the Figma screenshot at mobile and desktop widths.

Do not

Do not add CSS comments or HTML comments describing the design.
Do not use var() or hex values in class lists.
Do not select elements in scripts by styling classes.

Install figma-to-html and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

# figma-to-html **Stack:** Vite, HTML, Tailwind CSS v4 (`@theme` tokens + BEM `@apply`), GSAP, Just-validate. ALWAYS inspect the design with the Figma Desktop MCP (`figma-desktop`). Never guess values. ## Always read first - `src/styles/main.css` — the `@theme { }` block is the single source of truth for colors, fonts, radius, and shadows. - `.claude/knowledge/critical-constraints.md` - `.claude/rules/styling.md` and `.claude/rules/html-structure.md` ## Process 1. **Inspect** the selected Figma frame (layout, variables, typography, spacing, assets). Take a screenshot for reference. 2. **Decompose** it into Atomic Design levels: atoms (button, input), molecules (form-field, nav), organisms (page sections). Reuse existing components in `src/styles/components/**` before creating new ones. 3. **Tokens** — for every Figma value: - matching `@theme` variable exists → use its utility (`--color-accent` → `bg-accent`); - reusable value without a token → add it to `@theme` in `src/styles/main.css` (Figma alias `brand/red` → `--color-brand-red`); - one-off measurement → arbitrary utility inside `@apply` (`tracking-[0.3em]`). Never arbitrary colors. 4. **Markup** — write semantic HTML in the page file. Each component root gets `data-component="<level>/<name>"` and the BEM block class. No inline styles; no long utility chains. 5. **Styles** — create `src/styles/components/<level>s/<name>.css` with `@layer components { }` and `@apply`; register it in `src/styles/main.css`. 6. **Behavior** — motion → `src/scripts/animations/<organism>-animation.ts` (inside `gsap.matchMedia()`); forms → `src/scripts/forms/<form-name>.ts` with messages in `src/scripts/messages/`. Wire them in `src/main.ts`. 7. **Assets** — export images/icons to `public/` with kebab-case English names; decorative SVGs get `aria-hidden="true"`. 8. **Verify** — run `pnpm typecheck && pnpm lint && pnpm build`, then compare the page in the browser (Playwright or Chrome DevTools MCP) against the Figma screenshot at mobile and desktop widths. ## Do not - Do not add CSS comments or HTML comments describing the design. - Do not use `var()` or hex values in class lists. - Do not select elements in scripts by styling classes.

{ "prompt": "# figma-to-html\n\n**Stack:** Vite, HTML, Tailwind CSS v4 (`@theme` tokens + BEM `@apply`), GSAP, Just-validate.\n\nALWAYS inspect the design with the Figma Desktop MCP (`figma-desktop`). Never guess values.\n\n## Always read first\n\n- `src/styles/main.css` — the `@theme { }` block is the single source of truth for colors, fonts, radius, and shadows.\n- `.claude/knowledge/critical-constraints.md`\n- `.claude/rules/styling.md` and `.claude/rules/html-structure.md`\n\n## Process\n\n1. **Inspect** the selected Figma frame (layout, variables, typography, spacing, assets). Take a screenshot for reference.\n2. **Decompose** it into Atomic Design levels: atoms (button, input), molecules (form-field, nav), organisms (page sections). Reuse existing components in `src/styles/components/**` before creating new ones.\n3. **Tokens** — for every Figma value:\n - matching `@theme` variable exists → use its utility (`--color-accent` → `bg-accent`);\n - reusable value without a token → add it to `@theme` in `src/styles/main.css` (Figma alias `brand/red` → `--color-brand-red`);\n - one-off measurement → arbitrary utility inside `@apply` (`tracking-[0.3em]`). Never arbitrary colors.\n4. **Markup** — write semantic HTML in the page file. Each component root gets `data-component=\"<level>/<name>\"` and the BEM block class. No inline styles; no long utility chains.\n5. **Styles** — create `src/styles/components/<level>s/<name>.css` with `@layer components { }` and `@apply`; register it in `src/styles/main.css`.\n6. **Behavior** — motion → `src/scripts/animations/<organism>-animation.ts` (inside `gsap.matchMedia()`); forms → `src/scripts/forms/<form-name>.ts` with messages in `src/scripts/messages/`. Wire them in `src/main.ts`.\n7. **Assets** — export images/icons to `public/` with kebab-case English names; decorative SVGs get `aria-hidden=\"true\"`.\n8. **Verify** — run `pnpm typecheck && pnpm lint && pnpm build`, then compare the page in the browser (Playwright or Chrome DevTools MCP) against the Figma screenshot at mobile and desktop widths.\n\n## Do not\n\n- Do not add CSS comments or HTML comments describing the design.\n- Do not use `var()` or hex values in class lists.\n- Do not select elements in scripts by styling classes.", "variables": [], "notes": "Convert a Figma frame into HTML + BEM/@apply component styles following this project's conventions.", "metadata": { "source": { "provider": "github-claude-commands", "repository": "https://github.com/JoseCortezz25/html-starter", "path": ".claude/commands/figma-to-html.md", "ref": "0f4739a252d9dfc2e65d7c35ae925136bc2682b9", "url": "https://github.com/JoseCortezz25/html-starter/blob/0f4739a252d9dfc2e65d7c35ae925136bc2682b9/.claude/commands/figma-to-html.md", "key": "JoseCortezz25/html-starter/.claude/commands/figma-to-html.md" } } }

figma-to-html

About

figma-to-html

Always read first

Process

Do not

Install figma-to-html and it becomes one more candidate the router can pick - when it fits.

What it costs to adopt - in engineering time.

One base URL

No vendor lock-in

Failover built in

Use it

Manifest

Reviews