New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

UI Designer

by AFK-surf in AFK-surf/OpenBridge

Design or restyle user interfaces using vendored DESIGN.md references from popular product and brand-inspired visual systems.

MITAuto-check passedFrontend & Design

Install UI Designer

skills CLI
$ npx skills add AFK-surf/OpenBridge --skill ui-designer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install AFK-surf/OpenBridge ui-designer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/AFK-surf/OpenBridge.git skills-src && mkdir -p .claude/skills && cp -r skills-src/macos/OpenBridge/Resources/SystemSkills.bundle/ui-designer .claude/skills/ui-designer && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ui-designer
GitHub stars
430
Token cost
~4.6k tokens
SKILL.md length
2,087 words
Files
72 (incl. scripts, references)
Skills in repo
14
Repo updated
First seen
Licence
MIT

At a glance

Design or restyle user interfaces using vendored DESIGN.md references from popular product and brand-inspired visual systems.

  • Works in 4 steps: Explicit style or brand in the current… → Existing style already established for… → A request-local random reference drawn… → …
  • The user asks for UI in the style of a named reference such as Stripe
  • SKILL.md covers Reference Files, Style Source Contract, Reference Index and Reference Selection Priority, plus 6 more sections
  • Asks to match a reference design

What it does

UI Designer is an agent skill from AFK-surf/OpenBridge. Design or restyle user interfaces using vendored DESIGN.md references from popular product and brand-inspired visual systems. Use when the user asks for UI in the style of a named reference such as Stripe, Vercel, Apple, Linear, Airbnb, Spotify, Notion, Figma, or similar; asks to match a reference design; or wants the agent to choose a polished visual direction for web/app UI when no style is specified.

Its SKILL.md is about 4.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 73 other files, including scripts and reference files (for example `references/designs/airbnb.md`, `references/designs/airtable.md` and `references/designs/apple.md`).

It sits in Frontend & Design, covering Design tokens. It works with Vercel, Figma, Notion and Spotify. The repository describes itself as: A free, safe and open agent for everything. Alternative to Claude Cowork & Codex. Open Bridge, the AI bridge between your intention and get the job done. The licence is MIT.

When your agent uses it

  • The user asks for UI in the style of a named reference such as Stripe
  • Asks to match a reference design
  • Wants the agent to choose a polished visual direction for web/app UI when no style is specified

Example prompts

  • “/ui-designer”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Explicit style or brand in the current request.
  2. Existing style already established for the same artifact or screen that the user is continuing.
  3. A request-local random reference drawn from references/designs/*.md when the request leaves style open-ended.
  4. Current-request product category, audience, and adjectives when the user gives a visual direction but no named brand.

What it can do on your machine

Read from SKILL.md and the folder at commit a9ca905. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Designer loads about 4.6k tokens when it runs, and up to ~294k if it reads all its reference files. Until then it costs about 105 tokens; SKILL.md has 2,087 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~105
When it runs · the whole SKILL.md, loaded when a task matches
~4.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~294k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from AFK-surf/OpenBridge at commit a9ca905, republished under its MIT licence (© AFK-surf). 2,087 words, ~4,625 tokens.

Download SKILL.mdSave it as .claude/skills/ui-designer/SKILL.md (or your agent's skills folder). This skill also uses 71 other files; get the full folder from GitHub.
name
ui-designer
description
Design or restyle user interfaces using vendored DESIGN.md references from popular product and brand-inspired visual systems. Use when the user asks for UI in the style of a named reference such as Stripe, Vercel, Apple, Linear, Airbnb, Spotify, Notion, Figma, or similar; asks to match a reference design; or wants the agent to choose a polished visual direction for web/app UI when no style is specified.
metadata.displayName
UI Designer
metadata.icon
paintpalette
metadata.color
cyan
metadata.visibility
visible
metadata.placeholder
Name a reference style or describe the UI to design

UI Designer

Use this skill to create, restyle, or review UI with a visual language based on a vendored DESIGN.md reference.

The references are curated starting points, not official brand systems. Use them as inspiration for composition, tone, spacing, type, color roles, and component behavior. Do not copy logos, trademarked assets, or claim affiliation with the referenced company.

Reference Files

  • Design docs: references/designs/<slug>.md
  • Source notice: references/source-license.md

Use the reference index below when the user names a reference, asks what styles are available, or gives an ambiguous brand/style name. Then load only the selected design doc.

Style Source Contract

Every style decision must come from one vendored markdown file under skills/ui-designer/references/designs/*.md.

Use that vendored markdown as the sole style source for:

  • composition and layout direction
  • color roles and contrast
  • typography and spacing
  • component shape, borders, shadows, and motion

Use external pages, product docs, screenshots, and live websites for factual content only. Keep style selection anchored to the vendored markdown path above.

Reference Index

<!-- BEGIN GENERATED DESIGN REFERENCES -->
AI & LLM Platforms
  • claude - Claude: Anthropic's AI assistant. Warm terracotta accent, clean editorial layout Path: references/designs/claude.md
  • cohere - Cohere: Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic Path: references/designs/cohere.md
  • elevenlabs - ElevenLabs: AI voice platform. Dark cinematic UI, audio-waveform aesthetics Path: references/designs/elevenlabs.md
  • minimax - Minimax: AI model provider. Bold dark interface with neon accents Path: references/designs/minimax.md
  • mistral.ai - Mistral AI: Open-weight LLM provider. French-engineered minimalism, purple-toned Path: references/designs/mistral.ai.md
  • ollama - Ollama: Run LLMs locally. Terminal-first, monochrome simplicity Path: references/designs/ollama.md
  • opencode.ai - OpenCode AI: AI coding platform. Developer-centric dark theme Path: references/designs/opencode.ai.md
  • replicate - Replicate: Run ML models via API. Clean white canvas, code-forward Path: references/designs/replicate.md
  • runwayml - RunwayML: AI video generation. Cinematic dark UI, media-rich layout Path: references/designs/runwayml.md
  • together.ai - Together AI: Open-source AI infrastructure. Technical, blueprint-style design Path: references/designs/together.ai.md
  • voltagent - VoltAgent: AI sandbox vm. Void-black canvas, emerald accent, terminal-native Path: references/designs/voltagent.md
  • x.ai - xAI: Elon Musk's AI lab. Stark monochrome, futuristic minimalism Path: references/designs/x.ai.md
Automotive
  • bmw - BMW: Luxury automotive. Dark premium surfaces, precise German engineering aesthetic Path: references/designs/bmw.md
  • bugatti - Bugatti: Luxury hypercar. Cinema-black canvas, monochrome austerity, monumental display type Path: references/designs/bugatti.md
  • ferrari - Ferrari: Luxury automotive. Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness Path: references/designs/ferrari.md
  • lamborghini - Lamborghini: Luxury automotive. True black cathedral, gold accent, LamboType custom Neo-Grotesk Path: references/designs/lamborghini.md
  • renault - Renault: French automotive. Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons Path: references/designs/renault.md
  • tesla - Tesla: Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans Path: references/designs/tesla.md
Backend, Database & DevOps
  • clickhouse - ClickHouse: Fast analytics database. Yellow-accented, technical documentation style Path: references/designs/clickhouse.md
  • composio - Composio: Tool integration platform. Modern dark with colorful integration icons Path: references/designs/composio.md
  • hashicorp - HashiCorp: Infrastructure automation. Enterprise-clean, black and white Path: references/designs/hashicorp.md
  • mongodb - MongoDB: Document database. Green leaf branding, developer documentation focus Path: references/designs/mongodb.md
  • posthog - PostHog: Product analytics. Playful hedgehog branding, developer-friendly dark UI Path: references/designs/posthog.md
  • sanity - Sanity: Headless CMS. Red accent, content-first editorial layout Path: references/designs/sanity.md
  • sentry - Sentry: Error monitoring. Dark dashboard, data-dense, pink-purple accent Path: references/designs/sentry.md
  • supabase - Supabase: Open-source Firebase alternative. Dark emerald theme, code-first Path: references/designs/supabase.md
Design & Creative Tools
  • airtable - Airtable: Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic Path: references/designs/airtable.md
  • clay - Clay: Creative agency. Organic shapes, soft gradients, art-directed layout Path: references/designs/clay.md
  • figma - Figma: Collaborative design tool. Vibrant multi-color, playful yet professional Path: references/designs/figma.md
  • framer - Framer: Website builder. Bold black and blue, motion-first, design-forward Path: references/designs/framer.md
  • miro - Miro: Visual collaboration. Bright yellow accent, infinite canvas aesthetic Path: references/designs/miro.md
  • webflow - Webflow: Visual web builder. Blue-accented, polished marketing site aesthetic Path: references/designs/webflow.md
Developer Tools & IDEs
  • cursor - Cursor: AI-first code editor. Sleek dark interface, gradient accents Path: references/designs/cursor.md
  • expo - Expo: React Native platform. Dark theme, tight letter-spacing, code-centric Path: references/designs/expo.md
  • lovable - Lovable: AI full-stack builder. Playful gradients, friendly dev aesthetic Path: references/designs/lovable.md
  • raycast - Raycast: Productivity launcher. Sleek dark chrome, vibrant gradient accents Path: references/designs/raycast.md
  • superhuman - Superhuman: Fast email client. Premium dark UI, keyboard-first, purple glow Path: references/designs/superhuman.md
  • vercel - Vercel: Frontend deployment platform. Black and white precision, Geist font Path: references/designs/vercel.md
  • warp - Warp: Modern terminal. Dark IDE-like interface, block-based command UI Path: references/designs/warp.md
E-commerce & Retail
  • airbnb - Airbnb: Travel marketplace. Warm coral accent, photography-driven, rounded UI Path: references/designs/airbnb.md
  • meta - Meta: Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs Path: references/designs/meta.md
  • nike - Nike: Athletic retail. Monochrome UI, massive uppercase Futura, full-bleed photography Path: references/designs/nike.md
  • shopify - Shopify: E-commerce platform. Dark-first cinematic, neon green accent, ultra-light display type Path: references/designs/shopify.md
Fintech & Crypto
  • binance - Binance: Crypto exchange. Bold Binance Yellow on monochrome, trading-floor urgency Path: references/designs/binance.md
  • coinbase - Coinbase: Crypto exchange. Clean blue identity, trust-focused, institutional feel Path: references/designs/coinbase.md
  • kraken - Kraken: Crypto trading platform. Purple-accented dark UI, data-dense dashboards Path: references/designs/kraken.md
  • mastercard - Mastercard: Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth Path: references/designs/mastercard.md
  • revolut - Revolut: Digital banking. Sleek dark interface, gradient cards, fintech precision Path: references/designs/revolut.md
  • stripe - Stripe: Payment infrastructure. Signature purple gradients, weight-300 elegance Path: references/designs/stripe.md
  • wise - Wise: International money transfer. Bright green accent, friendly and clear Path: references/designs/wise.md
Media & Consumer Tech
  • apple - Apple: Consumer electronics. Premium white space, SF Pro, cinematic imagery Path: references/designs/apple.md
  • ibm - IBM: Enterprise technology. Carbon design system, structured blue palette Path: references/designs/ibm.md
  • nvidia - NVIDIA: GPU computing. Green-black energy, technical power aesthetic Path: references/designs/nvidia.md
  • pinterest - Pinterest: Visual discovery platform. Red accent, masonry grid, image-first Path: references/designs/pinterest.md
  • playstation - PlayStation: Gaming console retail. Three-surface channel layout, cyan hover-scale interaction Path: references/designs/playstation.md
  • spacex - SpaceX: Space technology. Stark black and white, full-bleed imagery, futuristic Path: references/designs/spacex.md
  • spotify - Spotify: Music streaming. Vibrant green on dark, bold type, album-art-driven Path: references/designs/spotify.md
  • theverge - The Verge: Tech editorial media. Acid-mint and ultraviolet accents, Manuka display type Path: references/designs/theverge.md
  • uber - Uber: Mobility platform. Bold black and white, tight type, urban energy Path: references/designs/uber.md
  • vodafone - Vodafone: Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands Path: references/designs/vodafone.md
  • wired - WIRED: Tech magazine. Paper-white broadsheet density, custom serif, ink-blue links Path: references/designs/wired.md
Productivity & SaaS
  • cal - Cal.com: Open-source scheduling. Clean neutral UI, developer-oriented simplicity Path: references/designs/cal.md
  • intercom - Intercom: Customer messaging. Friendly blue palette, conversational UI patterns Path: references/designs/intercom.md
  • linear.app - Linear: Project management for engineers. Ultra-minimal, precise, purple accent Path: references/designs/linear.app.md
  • mintlify - Mintlify: Documentation platform. Clean, green-accented, reading-optimized Path: references/designs/mintlify.md
  • notion - Notion: All-in-one workspace. Warm minimalism, serif headings, soft surfaces Path: references/designs/notion.md
  • resend - Resend: Email API for developers. Minimal dark theme, monospace accents Path: references/designs/resend.md
  • zapier - Zapier: Automation platform. Warm orange, friendly illustration-driven Path: references/designs/zapier.md
<!-- END GENERATED DESIGN REFERENCES -->

Reference Selection Priority

Pick the reference in this order:

  1. Explicit style or brand in the current request.
  2. Existing style already established for the same artifact or screen that the user is continuing.
  3. A request-local random reference drawn from references/designs/*.md when the request leaves style open-ended.
  4. Current-request product category, audience, and adjectives when the user gives a visual direction but no named brand.

Treat style as request-local unless the user clearly asks to keep the previous style or is obviously iterating on the same artifact. Recompute the reference from the current request each time. A brand mentioned in an earlier request does not become the default for a later unrelated request.

When the user does not mention style or UI design, or for requests like any style is fine, you decide, pick any option, open-ended, or any request that leaves style unspecified, go straight to the random-reference branch. Use product category and audience as fit checks after the random draw, and use them for one redraw only when hard constraints require it.

Show full SKILL.md (893 more words)Show less

When Style Is Unspecified

For a fresh artifact with no named reference and no established style, select one design doc at random from the vendored files in references/designs/.

Use the built-in JavaScript tool on the bundled picker. The draw source is the vendored path inside this skill, so the reference always comes from skills/ui-designer/references/designs/*.md.

Execution pattern:

  1. Call JavaScriptFromFile with path: "scripts/pick_random_reference.js".
  2. Pass SEED in env only when you need a reproducible testcase draw.
  3. Parse the returned JSON string and use slug as the reference.

Example tool call:

json
{
  "path": "scripts/pick_random_reference.js",
  "env": {
    "SEED": "no-style"
  }
}

Selection rules:

  • Treat the random draw as request-local. A brand from an earlier unrelated request does not become the default later.
  • Keep the established reference when the user is clearly iterating on the same artifact and wants continuity.
  • If the first random draw conflicts with hard product constraints in the current request, redraw once and keep the second result.
  • Read references/designs/<slug>.md immediately after the draw.
  • Lock the chosen markdown as the sole style source for the rest of the task.
  • Complete the Reference Lock and Extraction Record before any UI design work begins.

Reference Lock and Extraction Record

For the no-style branch, this sequence is mandatory and ordered:

  1. Call JavaScriptFromFile on scripts/pick_random_reference.js.
  2. Parse the returned JSON and resolve references/designs/<slug>.md.
  3. Read that vendored markdown file in full.
  4. Write a short extraction record from that file before deciding any visual direction.
  5. Start implementation only after the extraction record is complete.

The extraction record must include:

  • chosen slug and markdown path
  • theme and atmosphere
  • color roles
  • typography rules
  • component styling rules
  • layout and spacing rules
  • depth, interaction, and motion rules
  • hard constraints and no-go rules

Use that extraction record as the design contract for the rest of the task.

Until the extraction record exists, keep the work in pre-design mode. Hero composition, color palette, typography, component styling, and layout direction all come after the markdown has been read and extracted.

Reference Extraction Pass

After selecting a vendored markdown file, do one explicit extraction pass before any design work.

Read the chosen file section by section and extract concrete constraints from these headings when present:

  1. Visual Theme & Atmosphere
  2. Color Palette & Roles
  3. Typography Rules
  4. Component Stylings
  5. Layout Principles or Layout
  6. Depth & Elevation
  7. Do's and Don'ts
  8. Responsive Behavior

Turn that extraction into implementation-ready notes:

  • theme and mood
  • exact color roles and contrast
  • type families, sizes, weights, tracking, and casing
  • component shapes, borders, shadows, and interaction patterns
  • spacing, grid, density, and section rhythm
  • responsive behavior and layout collapse rules
  • hard constraints to preserve while designing

If a heading is missing, continue with the remaining headings in the same vendored markdown and keep the design anchored to that file.

Workflow

  1. Identify the target UI surface, framework, whether this is a continuation of an existing artifact, and any existing design constraints from the repository.
  2. Choose the reference slug from the Reference Index.
    • The only valid style source is a vendored markdown file matching skills/ui-designer/references/designs/*.md.
    • Use exact slug/name matches first.
    • If the current request continues the same page, screen, or feature, keep the existing reference unless the user asks for a change.
    • If the user describes a mood instead of a brand, pick the closest index entry from the current request and state the choice briefly.
    • If the style is unspecified and there is no established reference yet, call JavaScriptFromFile on scripts/pick_random_reference.js, parse the returned JSON string, and use its slug before any design reasoning begins.
    • For the no-style branch, product category and audience act as post-draw fit checks. They may justify one redraw when hard constraints require it.
    • After the draw, read the matching vendored file from references/designs/<slug>.md and lock it before making any visual decisions.
    • If the random draw clearly clashes with hard product constraints, redraw once and keep the second result.
    • If multiple references fit after an explicit style request, pick one primary reference and optionally one secondary accent reference.
  3. Read references/designs/<slug>.md and complete the Reference Lock and Extraction Record first.
  4. Do the Reference Extraction Pass from the locked markdown file.
  5. Convert the extracted constraints into concrete implementation choices:
    • color tokens and semantic roles
    • typography scale, weights, and casing
    • spacing, grid, density, and breakpoints
    • button, card, input, navigation, table, and modal treatments
    • depth, borders, shadows, motion, and interaction states
  6. Implement using the project's existing UI stack and component patterns.
  7. Run one self-check before finishing: theme, color, type, component styling, and layout choices must each trace back to the locked markdown file.
  8. Verify the result with the repo's normal build, lint, tests, screenshots, or visual checks when available.

Design Rules

  • Preserve user requirements and product functionality over reference fidelity.
  • Prefer reusable tokens and existing component APIs over one-off CSS.
  • Make the UI recognizably inspired by the reference without copying proprietary marks or text.
  • Keep layouts responsive and stable; text must not clip or overlap.
  • Use real assets only when the project already has appropriate rights or the user provides them.
  • For accessibility, keep contrast, focus states, labels, keyboard behavior, and reduced-motion behavior intact.

Output Guidance

When reporting the work, name the reference used and summarize the main visual decisions. When the style was inferred, say which reference you chose and why it fit the current request. If the requested reference was unavailable, say which closest reference was used and why.

© AFK-surf, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 71 other files (scripts, references) in macos/OpenBridge/Resources/SystemSkills.bundle/ui-designer of AFK-surf/OpenBridge.

  • SKILL.md
  • references/designs/airbnb.md
  • references/designs/airtable.md
  • references/designs/apple.md
  • references/designs/binance.md
  • references/designs/bmw.md
  • references/designs/bugatti.md
  • references/designs/cal.md
  • references/designs/claude.md
  • references/designs/clay.md
  • references/designs/clickhouse.md
  • references/designs/cohere.md
  • references/designs/coinbase.md
  • references/designs/composio.md
  • references/designs/cursor.md
  • references/designs/elevenlabs.md
  • references/designs/expo.md
  • references/designs/ferrari.md
  • references/designs/figma.md
  • … and 53 more

Open the folder on GitHubat commit a9ca905

Compare with similar skills

UI Designer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI Designer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI Designer this skillAFK-surf/OpenBridge430—~4.6kAutomated safety check: PassMIT
Awesome Design Mdinfometa/workbuddyskills346—~2.4kAutomated safety check: NotesNone
Claude Designmateaix/mateclaw1.1k3 repos~4.9kAutomated safety check: PassApache-2.0
Popular Web Designsyc-software/qm15k—~2.9kAutomated safety check: PassMIT
Popular Web DesignsTommy-yw/RunbookHermes5461 repos~2.4kAutomated safety check: PassMIT
Brand Logosusenotra/notra256—~2.1kAutomated safety check: PassAGPL-3.0

Similar skills

  • Awesome Design Md

    infometa/workbuddyskills

    Curated collection of 54 DESIGN.md files extracted from real developer-focused websites (Vercel, Stripe, Linear, Notion, Figma, etc.).

    346 GitHub stars~2.4k tokensUpdated today
    Frontend & DesignAuto-check: notes

  • Claude Design

    mateaix/mateclaw

    Design one-off HTML artifacts (landing, deck, prototype). An agent skill from mateaix/mateclaw.

    1.1k GitHub starsUsed in 3 repos~4.9k tokens
    Frontend & DesignAuto-check passed

  • Popular Web Designs

    yc-software/qm

    54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS — exact colors, typography, components, and spacing for styling a page after a known brand.

    15k GitHub stars~2.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Popular Web Designs

    Tommy-yw/RunbookHermes

    54 production-quality design systems extracted from real websites.

    546 GitHub starsUsed in 1 repo~2.4k tokens
    Frontend & DesignAuto-check passed

  • Brand Logos

    usenotra/notra

    Fetch official brand/product/tool logos (Stripe, GitHub, Notion, AWS, Figma, etc.) as clean SVGs from SVGL (svgl.app) — as saved .svg files, inline markup, or installed React components.

    256 GitHub stars~2.1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Design Library

    Owl-Listener/designpowers

    A skill your agent uses when the user wants to start from a known brand's design language — "use the same design language as Stripe", "make it feel like Linear", "start from Notion's DESIGN.md"…

    251 GitHub stars~2.1k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

More from AFK-surf/OpenBridge

All 14 skills in this repo

  • Swiftui UI Patterns

    AFK-surf/OpenBridge

    Best practices and example-driven guidance for building SwiftUI views and components.

    430 GitHub starsUsed in 4 repos~887 tokens
    Auto-check passed

  • Swiftui Expert Skill

    AFK-surf/OpenBridge

    Write, review, or improve SwiftUI code following best practices for state management, view composition, performance, modern APIs, Swift concurrency, and iOS 26+ Liquid Glass adoption.

    430 GitHub starsUsed in 2 repos~3.9k tokens
    Auto-check passed

  • Bridge Agent Log Analyzer

    AFK-surf/OpenBridge

    Analyze Bridge agent execution logs from ~/.bridge/sessions, reconstruct the agent's actual runtime behavior, and explain tool execution, failures, retries, and artifacts from persisted session files.

    430 GitHub stars~1.3k tokensUpdated 4 mo ago
    Auto-check passed

  • Format Converter

    AFK-surf/OpenBridge

    Convert files between formats. An agent skill from AFK-surf/OpenBridge.

    430 GitHub stars~549 tokensUpdated 4 mo ago
    Auto-check passed

  • Skill Manager

    AFK-surf/OpenBridge

    Manage skills: create, install, modify, or delete skills. An agent skill from AFK-surf/OpenBridge.

    430 GitHub stars~749 tokensUpdated 4 mo ago
    Auto-check passed

  • Swift Concurrency

    AFK-surf/OpenBridge

    Expert guidance on Swift Concurrency best practices, patterns, and implementation.

    430 GitHub stars~2.8k tokensUpdated 4 mo ago
    Auto-check passed

Works with

Categories

Questions about UI Designer

What does UI Designer do?

Design or restyle user interfaces using vendored DESIGN.md references from popular product and brand-inspired visual systems. UI Designer is an agent skill from AFK-surf/OpenBridge.md references from popular product and brand-inspired visual systems.

When should I use UI Designer?

UI Designer fits situations like: the user asks for UI in the style of a named reference such as Stripe; asks to match a reference design; wants the agent to choose a polished visual direction for web/app UI when no style is specified.

How do I install UI Designer in Claude Code?

Run `npx skills add AFK-surf/OpenBridge --skill ui-designer -a claude-code`. Or copy the skill folder (macos/OpenBridge/Resources/SystemSkills.bundle/ui-designer in AFK-surf/OpenBridge) into .claude/skills/ui-designer in your project. Claude Code loads it when a task matches its description.

How do I install UI Designer in Codex?

Run `npx skills add AFK-surf/OpenBridge --skill ui-designer -a codex`. Or copy the skill folder (macos/OpenBridge/Resources/SystemSkills.bundle/ui-designer in AFK-surf/OpenBridge) into .agents/skills/ui-designer in your project. Codex loads it when a task matches its description.

Can I use UI Designer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AFK-surf/OpenBridge --skill ui-designer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-designer, .gemini/skills/ui-designer, .github/skills/ui-designer and .opencode/skills/ui-designer in your project.

What does UI Designer need to run?

SKILL.md names no scripts, command-line tools or credentials: UI Designer is instructions for the agent only.

Does UI Designer access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is UI Designer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does UI Designer use?

UI Designer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI Designer use?

About 4.6k tokens (SKILL.md is roughly 19k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 290k tokens, read only when the agent opens those files.

What are the alternatives to UI Designer?

Skills that share tags, products or a category with UI Designer: Awesome Design Md (infometa/workbuddyskills, 346 stars), Claude Design (mateaix/mateclaw, 1.1k stars), Popular Web Designs (yc-software/qm, 15k stars) and Popular Web Designs (Tommy-yw/RunbookHermes, 546 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Designer?

AFK-surf (a GitHub organization) maintains it in AFK-surf/OpenBridge, which has 430 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on June 10, 2026.

Source: AFK-surf/OpenBridge on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.