Skip to content
cccskills
FreePublished on GitHubEnglish overview

frontend-design

Build websites, dashboards, and application screens with a clear visual direction and working frontend code. The skill covers typography, color, layout, responsive behavior, and interaction states while following existing project conventions and brand guidance.

OriginalShow the original description

Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.

nexu-io/open-design
AI rating100/ 100See how to install

Good for

  • Building a landing page with a clear visual direction
  • Designing a dashboard for everyday work
  • Refining the appearance and behavior of existing UI
  • Creating responsive React components

Overview

What it does

frontend-design creates websites, landing pages, dashboards, and application screens, taking them from design to working code. It considers the intended users and purpose, then gives typography, color, spacing, and screen layout a consistent direction. It supports HTML/CSS/JS as well as components for React, Vue, and Svelte.

When it helps

Use it to refine an existing interface or design screens that people use repeatedly at work. Alongside appearance, it considers the elements needed for actual use: loading, empty-data, and error states, filters, and navigation. Existing design rules and components serve as the starting point when they are available. It also addresses layouts that adapt to smartphone screens.

Example requests

  • “Build an analytics dashboard for a finance team, including the states users encounter during interaction.”
  • “Refine this screen to match our existing brand and make it easy to use on smartphones.”

Notes

When OpenDesign provides a design system, its specifications take priority. Keyboard operation and text contrast are also checked. See the included LICENSE.txt for license terms.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodIt explicitly covers building or improving websites and interfaces, with working code as the intended result.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodSix stages cover understanding requirements, implementation, and self-review, with specific interface states and checks.
SafetyAre sending data, deleting files, and running commands disclosed?
AGoodInstructions focus on interface design and code creation; they do not direct external transmission, deletion, or credential access.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodIt uses the existing development environment or standalone HTML/CSS/JS, with no dedicated API key required.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (2)

  • SKILL.md5.1 KB
  • LICENSE.txt9.9 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

frontend-design

Adapted from Anthropic's official frontend-design skill for OpenDesign.

Use this skill when the user asks to build or improve a frontend interface: a website, landing page, dashboard, application screen, HTML/CSS artifact, React/Vue/Svelte component, or a visual redesign of an existing UI.

The goal is not just "make it nicer." The goal is to ship working frontend code with a clear design point of view, strong craft, and enough product detail that the result feels designed for the user's actual context.

Workflow

  1. Understand the brief before choosing the look.

    • Identify the audience, primary job, domain, and emotional tone.
    • Note any technical constraints: framework, existing styles, accessibility, performance, export target, or responsive requirements.
    • If the repo already has design tokens, components, screenshots, or a DESIGN.md, use those as the source of truth.

  2. Commit to one specific aesthetic direction.

    • Pick a direction that fits the product: brutally minimal, editorial, luxury, playful, industrial, retro-futuristic, dense operational, calm enterprise, artful consumer, or another precise direction.
    • Make the direction concrete through typography, spacing, color, hierarchy, motion, and component shape.
    • Avoid generic AI defaults: purple-blue gradients, vague glass cards, interchangeable SaaS layouts, over-rounded cards, stock icon rows, and decorative blobs that do not serve the interface.

  3. Design the real interface, not a placeholder poster.

    • Include the controls, empty/loading/error states, tables, filters, navigation, and responsive behavior a real user would expect.
    • Use honest content. If data is unknown, label it as sample, pending, or unavailable instead of inventing claims.
    • Keep workflows efficient for the target user. Dashboards and tools should be scannable and dense enough for repeated use; marketing pages can be more expressive.

  4. Build production-grade frontend code.

    • Prefer the repository's existing framework, component conventions, icons, tokens, and styling approach.
    • For standalone artifacts, create self-contained HTML/CSS/JS unless the user asked for a framework.
    • Use semantic markup, keyboard-accessible controls, visible focus states, sensible contrast, and responsive layout constraints.
    • Use CSS variables for repeated colors, spacing, shadows, and type scale.

  5. Refine visual craft.

    • Typography: choose expressive but readable type pairings. Avoid using default system stacks as the main visual idea unless the direction is intentionally utilitarian.
    • Color: create a balanced palette with role clarity. Use accent color sparingly and deliberately.
    • Layout: use alignment, rhythm, density, and negative space intentionally. Do not let cards, panels, or labels drift.
    • Motion: add purposeful transitions for state changes, reveals, and feedback. Prefer transforms and opacity for performance.
    • Details: use texture, borders, shadows, dividers, media, and iconography only when they support the concept.

  6. Self-review before final delivery.

    • The interface works at mobile and desktop widths.
    • Text fits its containers and does not overlap adjacent UI.
    • Interactive elements have hover/focus/active/disabled states.
    • The design avoids obvious AI-generated visual tropes.
    • The result has one memorable quality a user could describe after closing the page.

OpenDesign Integration

When OpenDesign provides an active design system, treat it as the product's brand contract. Use the injected color, typography, layout, and component guidance first, then apply this skill's frontend craft rules where the design system is silent.

When OpenDesign injects craft references such as typography, color, and anti-ai-slop, apply those checks before finishing. If the user's brand guidance conflicts with a generic craft rule, the user's brand guidance wins.

Source

License

This skill is adapted from Anthropic's official skills repository. See LICENSE.txt in this folder for the upstream Apache-2.0 license terms.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design102.7KUpdated Oct 20, 2026

ad-creative

FreeSummaryAI rating 80

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design102.7KUpdated Oct 20, 2026

after-hours-editorial-template

FreeSummaryAI rating 80

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design102.7KUpdated Oct 20, 2026

agent-browser

FreeSummaryAI rating 100

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design102.7KUpdated Oct 20, 2026

ai-music-album

FreeSummaryAI rating 80

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design102.7KUpdated Oct 20, 2026

algorithmic-art

FreeSummaryAI rating 80

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design102.7KUpdated Oct 20, 2026

See all skills by nexu-io

Report a problem with this skill