Practical Applications of LLMs in Design

#product #oxlo #ai

Large language models have moved beyond chat interfaces and are now embedded in the design stack. Product teams use them to generate React components, maintain design tokens, critique accessibility, and produce production assets. The difference between a prototype and a shipped feature often comes down to how reliably a model can parse visual context, follow strict JSON schemas, and iterate on long prompts without breaking the budget.

Generating Design Systems and Component Libraries

Design systems require consistency across hundreds of components. LLMs can generate design tokens, CSS variables, and component documentation from raw requirements. By prompting a structured model like Qwen 3 32B or Llama 3.3 70B on Oxlo.ai, teams can output machine-readable schemas that feed directly into Style Dictionary or Tailwind configs.

from openai import OpenAI

client = OpenAI(
    base_url="https://api.oxlo.ai/v1",
    api_key="YOUR_API_KEY"
)

response = client.chat.completions.create(
    model="qwen3-32b",
    messages=[
        {"role": "system", "content": "You are a design-system engineer. Return only valid JSON."},
        {"role": "user", "content": "Generate a design token JSON schema for a fintech dashboard with semantic colors for success, warning, and error states. Include typography scale, spacing scale in rem units, and border radius values."}
    ],
    response_format={"type": "json_object"}
)

tokens = response.choices[0].message.content

Because Oxlo.ai uses request-based pricing, expanding the system prompt with a 500-line existing token dictionary does not change the cost of the call.

Automating UI Copy and Content

Microcopy, error messages, and localization strings are tedious to maintain at scale. An LLM with function calling can return structured content objects that map to your component props. Oxlo.ai supports JSON mode and function calling across its chat models, so you can enforce schema compliance without prompt gymnastics.

response = client.chat.completions.create(
    model="llama-3.3-70b",
    messages=[
        {"role": "system", "content": "Return JSON with keys: headline, body, cta_label, aria_label."},
        {"role": "user", "content": "Write onboarding copy for a multi-factor authentication screen."}
    ],
    response_format={"type": "json_object"}
)

From Description to Code

The fastest way to test an idea is to describe it in plain language and receive working markup. Models like DeepSeek R1 671B MoE or Qwen 3 Coder 30B excel at translating design requirements into React or Vue components. Because Oxlo.ai charges per request rather than per token, iterating on a 3,000-word design spec with layout constraints does not inflate costs the way token-based pricing would.

response = client.chat.completions.create(
    model="qwen3-coder-30b",
    messages=[
        {"role": "system", "content": "You are a frontend engineer. Write accessible JSX with Tailwind classes."},
        {"role": "user", "content": "A pricing page with three tiers, toggle for monthly/yearly, and a feature comparison table. Use semantic HTML and include aria labels."}
    ]
)