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 for building landing pages, websites, and app interfaces using OpenAI's curated frontend principles. Use it when you need to design cohesive, visually disciplined UIs with restrained composition.
- Design landing pages with strong visual hierarchy
- Build app UIs following restrained composition principles
- Create cohesive website layouts using design system patterns
- Apply OpenAI's production frontend best practices
- Compose interfaces with intentional visual restraint
How to install frontend-skill
npx skills add https://github.com/nexu-io/open-design --skill frontend-skill- Install via: npx skills add https://github.com/nexu-io/open-design --skill frontend-skill
- Access to upstream repository at https://github.com/openai/skills for full assets and references
How to use frontend-skill
- 1.Install the skill using the provided npm command
- 2.Invoke the skill by name (frontend-skill) or use trigger phrases like 'landing page', 'frontend playbook', or 'ui composition'
- 3.Reference the upstream README at https://github.com/openai/skills for detailed assets, scripts, and design references
- 4.Apply the curated design principles to your UI composition work
Use cases
- Designing a new product landing page with consistent branding
- Building a web application UI that follows design system guidelines
- Creating marketing websites with strong visual impact and clarity
- Developing app interfaces with restrained, professional aesthetics
- Establishing design patterns for multi-page website projects
- Frontend designers
- UI/UX designers
- Product designers
- Web developers building branded interfaces
- Teams adopting design system practices
frontend-skill FAQ
This skill is curated from OpenAI's official skills repository and represents their production frontend playbook for creating visually strong interfaces.
Visit https://github.com/openai/skills to inspect the upstream README and access the complete workflow, assets, scripts, and references.
It refers to intentional, disciplined visual design that avoids unnecessary elements and focuses on clarity, hierarchy, and impact.
It's optimized for landing pages, websites, and app UIs, but the principles apply broadly to any interface design work.
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 Open Design 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-page-screenshot
Capture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies.
gsap-core
Official GSAP core animation library for JavaScript tweens, easing, and responsive motion.
gsap-frameworks
|
gsap-performance
|
gsap-plugins
|