frontend-skill
nexu-io/open-design
Create visually strong landing pages and UIs with restrained composition—OpenAI's production frontend playbook.
What is frontend-skill?
A design-system skill that guides creation of landing pages, websites, and app interfaces using restrained, intentional composition principles. Use this when you need to build visually cohesive frontend experiences following production-grade design practices.
- Guide visually strong landing page design
- Establish restrained UI composition patterns
- Apply OpenAI's production frontend principles
- Create cohesive website and app interfaces
- Provide design-system reference for frontend work
How to install frontend-skill
npx skills add https://github.com/nexu-io/open-design --skill frontend-skillHow to use frontend-skill
- 1.Ask the agent to invoke the skill by name (frontend-skill) or use trigger phrases like 'landing page', 'frontend playbook', 'ui composition', or 'restrained ui'
- 2.Reference the upstream OpenAI skills repository at https://github.com/openai/skills for full assets and scripts
- 3.Consult the design-system documentation for composition patterns and guidelines
- 4.Apply the restrained composition principles to your frontend work
Use cases
- Building a new product landing page with strong visual hierarchy
- Designing app UI components following a consistent design system
- Creating website layouts with intentional, minimal composition
- Establishing frontend design guidelines for a team
- Developing marketing sites with professional visual restraint
- Frontend developers
- UI/UX designers
- Product designers
- Web developers
- Design system maintainers
frontend-skill FAQ
Restrained composition refers to intentional, minimal design choices that prioritize clarity and visual hierarchy—avoiding unnecessary elements while maintaining strong visual impact.
No, this is a design-system skill focused on principles and patterns. It applies across frontend frameworks and technologies.
The upstream repository is at https://github.com/openai/skills. Inspect the README there for exact paths and additional resources.
Yes, the skill provides a playbook and reference system that you can adapt to your specific project needs and branding.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: frontend-skill description: | Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook. triggers:
- "landing page"
- "frontend playbook"
- "ui composition"
- "restrained ui" od: mode: design-system category: design-systems upstream: "https://github.com/openai/skills"
frontend-skill
Curated from OpenAI's skills repository.
What it does
Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.
Source
- Upstream: https://github.com/openai/skills
- Category:
design-systems
How to use
This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:
# Inspect the upstream README for exact paths
open https://github.com/openai/skills
Then ask the agent to invoke this skill by name (frontend-skill) or with
one of the trigger phrases listed in this skill's frontmatter.
Related skills
More from nexu-io/open-design and the wider catalog.
frontend-slides
Generate animation-rich HTML presentations with visual style previews.
full-output-enforcement
Enforce complete, unabridged code generation without placeholders or truncation.
full-page-screenshot
Capture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies.
gif-sticker-maker
Convert photos into animated GIF stickers in Funko Pop / Pop Mart style via MiniMax API.
gpt-taste
Elite UX/UI design engineer with GSAP motion, editorial typography, and gapless bento grids for award-winning landing pages.
gsap-core
Official GSAP core animation library for JavaScript tweens, easing, and responsive motion.