ui-design-source

ui-design-source is a skill for Claude Code, Codex from Orkas-AI/Orkas. It costs 3 tokens per session (2,035 once invoked), scanned A, original, MIT.

A design-source handoff workflow for turning materials such as Figma files, screenshots, PDFs, JSON, or existing HTML into accurate website code. Figma is a tool used to create and share interface designs.

In plain words
What is it for?
It is for design-to-HTML work, checking exported design files, documenting visual decisions, and preparing references for a UI implementation.
Why use it?
It clarifies what design evidence is actually available and prevents claims about files or design details that were not inspected.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit It is for design-to-HTML work, checking exported design files, documenting visual decisions, and preparing references for a UI implementation.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/orkas-ai/orkas/ui-design-source
About the project

Orkas is a desktop application for commanding a team of AI agents through one chat, with a commander model assigning work to specialist agents in parallel or in sequence. People use it to coordinate research, writing, presentations, and software tasks while keeping files on their computer. The catalogue includes skills for extending the agents available to Orkas.

Orkas-AI/Orkas · 1,776 stars · on GitHub · orkas.ai

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add Orkas-AI/Orkas --skill ui-design-source
Clone the repo
git clone --depth 1 https://github.com/Orkas-AI/Orkas

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for ui-design-source

README.md
[![agentmods](https://agentmods.dev/badge/skills/orkas-ai/orkas/ui-design-source.svg)](https://agentmods.dev/skills/orkas-ai/orkas/ui-design-source)
Your own site
<a href="https://agentmods.dev/skills/orkas-ai/orkas/ui-design-source"><img src="https://agentmods.dev/badge/skills/orkas-ai/orkas/ui-design-source.svg" alt="Measured on agentmods" height="20"></a>
Per session 3 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,035 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector warn 7 Sept 2026
SkillSpector: 1 finding, up to high

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

  • high Privilege Escalation · line 145
    Code accesses credential files (SSH keys, AWS credentials, etc.). This could indicate credential theft attempts.
    Fix: Remove references to credential paths. Use environment variables or secrets managers. For docs, use placeholder paths (e.g., /path/to/config). Never load .env or token files in production code paths.
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00003 $0.02035
Opus 5 $0.00002 $0.01018
Sonnet 5 $0.00001 $0.00407
Haiku 4.5 $0.00000 $0.00203

Measured 8d ago against content hash 3f181bcb5c96, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

ui-design-source scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

resources/builtin/marketplace/agents/bcfcb4921dce/skills/ui-design-source/SKILL.md · 164 lines

How it starts

The opening of the file, as written. The whole thing — 164 lines — stays where its author put it; the contents beside it link to each section on GitHub.

ui-design-source

Use this skill when the user provides Figma material, design-export files, screenshots of design tools, PDFs, JSON, existing HTML, or asks for design-to-HTML/code fidelity. It adapts OpenDesign/Figma handoff discipline for UIDesigner without requiring a live Figma runtime.

This skill turns design-source evidence into a compact handoff for ui-design-executor. Add a durable contract, reference pack, design-system, or deep renderer skill only when its specialist trigger is present; do not fan an ordinary screenshot task out to all of them.

Access Rules

  • If a Figma connector, MCP, plugin API, or exported file is actually available, inspect it with the available tool or file reader.
  • If the user only provides a Figma URL and no available Figma access exists, do not probe it with general web_fetch/browser search as substitute Figma access. Ask for a screenshot/export or continue only from visible notes. Do not claim "Figma imported", "frames inspected", or "variables read". Keep requested exact/1:1 work blocked until inspectable evidence arrives. Always put both next paths in the visible response before any question/form: Exact waits for a connector, screenshot, PDF, or export; Adaptive (optional) can start only after the user chooses it. Offer an adaptive provisional scaffold as non-fidelity work; never call it 1:1. Do not silently start the adaptive path.
  • If the design source is an image or PDF, treat it like a screenshot: extract what is visible, label uncertain text/spacing, and preserve information architecture.
  • If the design source is HTML/CSS, inspect the rendered surface when possible and use source files only to clarify tokens/components.

Source Intake

Classify the source:

  • figma_url: URL or file key, not enough by itself unless a connector/tool is available.
  • figma_export_json: nodes, components, variables, styles, constraints, or plugin export.
  • design_screenshot: frame image, prototype screenshot, app screenshot, or reference image.
  • design_pdf: exported specs, deck, or annotated design handoff.
  • existing_html: current artifact, app page, or prototype.
  • design_notes: Markdown/text PRD, redlines, specs, or designer comments.

Read the full file on GitHub · 164 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 8d ago First seen · 164 lines · 3 tokens per session scan A 3f181bcb5c96

Subscribe to this mod's changes

ui-design-source is a skill published in the GitHub repository Orkas-AI/Orkas (1,776 stars, last pushed yesterday), licensed MIT. It adds 3 tokens to every session and 2,035 once invoked, about $0.0000 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

tutti-ui-system

Use when working with @tutti-os/ui-system components, replacing local UI with shared components, querying component ids or metadata, promoting UI into shared base or business components, or maintaining UI-system storyboard inventory.

tutti-os/tutti · 46 tokens

frontend-design

Produce intentional, responsive, accessible UI work and perform visual QA instead of generic component assembly.

Hmbown/CodeWhale · 21 tokens

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

ThinkInAIXYZ/deepchat · 64 tokens

mcp-host-styling-integration

Integrates MCP App UI with host theming system. Applies host CSS variables, handles onhostcontextchanged, safe area insets, display mode detection, and fullscreen configuration.

a5c-ai/babysitter · 44 tokens

accessibility-a11y

Semantic HTML, keyboard navigation, focus states, ARIA labels, skip links, and WCAG contrast requirements. Use when ensuring accessibility compliance, implementing keyboard navigation, or adding screen reader support.

BlackBeltTechnology/pi-agent-dashboard · 44 tokens

impeccable

Use when the user wants distinctive, production-grade frontend design, anti-generic AI aesthetics, UX critique, technical UI audits, or final polish through bundled Impeccable references and an optional upstream detector CLI.

Peiiii/nextclaw · 47 tokens