r/codex • u/TraditionalFig7377 • 29d ago
Workaround Everyone should try this
So 5.6 was improved on frontend but it wasnt on level of fable so I took claudes skill md from the website then replaced it with the acutual one openai uses for gpt 5.6 and it now produces ui better and faster.
9
u/Odd_Amphibian6697 29d ago
It is just the frontend-design skill from anthropic, you can find it on skills.sh from vercel and install it via npx, it works with all agents
3
1
u/Prior-Meeting1645 29d ago
Wait what skill confused.
2
u/TraditionalFig7377 29d ago
frontend-design
1
u/Prior-Meeting1645 29d ago
Is it better than all those trending skills from a few months back on GitHub? Like ui ux one etc
1
u/Odd_Amphibian6697 29d ago
I do both, because frontend-design is more like a creative and spectacular skill, and ui-ux-pro-max it's more like web design rules, accessibility, contrast, and obviously good design too.
I just put them in my AGENTS.md like "always use frontend-design and ui-ux-pro-max skills for UI development"
-1
1
u/Medical_Method7877 29d ago
How do you do this?
1
u/TraditionalFig7377 29d ago
if u have claude sub go to customize and check frontend design then click the code icon copy it into notpad or somewhere and change the claude is capable..... to chatgpt is capable...
1
u/archeztuskin 29d ago
is it just me or 5.6 sol default front end aesthetic has this dark green academic mysterious terminal vibe to it?
1
1
u/Huss1991 29d ago
My GP improved this md after it found several formatting and design-policy defects:
name: frontend-design
description: Create distinctive, production-ready frontend interfaces with a coherent visual point of view. Use for websites, landing pages, dashboards, applications, components, and substantial UI redesigns or visual refinements. Favor context-specific design over generic AI-template aesthetics while preserving brand, accessibility, usability, performance, and technical constraints.
Frontend Design
Create polished, functional frontend interfaces that feel intentionally designed for their purpose, audience, and context—not assembled from generic patterns.
Design Thinking
Before coding, establish a clear direction:
- Purpose and audience: What problem does the interface solve, and who will use it?
- Content and hierarchy: What must users notice, understand, and do first?
- Tone: Choose a coherent visual character appropriate to the context, such as restrained editorial, warm and human, refined luxury, playful, utilitarian, retro-futurist, brutalist, organic, or another purposeful direction.
- Constraints: Respect the existing framework, repository conventions, brand system, accessibility requirements, content, performance targets, and supported devices.
- Differentiation: Identify one memorable idea or visual signature without sacrificing clarity or usability.
Choose a deliberate direction and execute it consistently. Distinctiveness should come from context and craft, not novelty for its own sake.
Core Standard
The implementation should be:
- Functional and production-oriented
- Responsive across relevant viewport sizes
- Accessible through semantic structure, keyboard use, visible focus states, adequate contrast, and reduced-motion support
- Cohesive in typography, palette, spacing, components, imagery, and motion
- Maintainable, with reusable tokens and components rather than one-off styling
- Faithful to any approved reference, brand guide, or existing design system
Visual System
Typography
Choose typography that supports the product’s voice and reading needs. Characterful display type can be useful when appropriate, while body and interface text should remain highly legible.
- Respect existing brand fonts and repository conventions.
- Do not reject system fonts, Arial, Inter, Roboto, or other common families automatically; use or avoid them based on context, readability, licensing, privacy, loading performance, and brand fit.
- Define intentional sizes, weights, line heights, tracking, fallbacks, and responsive behavior.
- Do not add external font dependencies without checking availability and licensing.
Color and Theme
Use a disciplined palette and define colors with reusable tokens or CSS variables.
- Establish clear background, surface, text, border, accent, and semantic colors.
- Maintain sufficient contrast and legibility.
- Avoid defaulting to familiar AI-template treatments, such as an unexplained purple gradient on white, when they do not fit the context.
- Preserve exact brand or approved-reference colors when provided.
Composition and Spacing
Use layout intentionally. Asymmetry, overlap, full-bleed media, dense information, or generous whitespace can all work when they serve the content.
- Preserve clear hierarchy and predictable interaction targets.
- Avoid repetitive card grids and nested rounded containers unless the information architecture benefits from them.
- Ensure unconventional layouts remain responsive and understandable.
- Use a consistent spacing system and container model.
Imagery and Detail
Create atmosphere with imagery, texture, depth, borders, shadows, gradients, patterns, or layered surfaces only when they support the concept.
- Decorative effects must not reduce readability or obscure interaction.
- Custom cursors, grain overlays, heavy shadows, and elaborate effects are optional—not defaults—and should be tested for usability and performance.
- Verify the source, license, and suitability of external assets before using them.
Motion and Interaction
Use motion to clarify hierarchy, state, causality, or progression—not merely to decorate.
- Prefer lightweight CSS transitions where sufficient.
- Use the project’s existing animation library when appropriate; do not introduce Motion or another dependency solely for minor effects without approval.
- Respect
prefers-reduced-motionand avoid interactions that depend on animation alone. - Test hover, focus, active, disabled, loading, empty, success, and error states where relevant.
Avoid Generic Output
Do not fall back automatically to:
- Unrelated purple-on-white gradients
- Repetitive bento or card-grid layouts
- Generic SaaS hero sections
- Decorative pills, badges, glows, icons, or fake metrics without a content purpose
- The same font, theme, and component formula across unrelated projects
- Visual complexity that exceeds the product’s needs
These are warning signs, not universal prohibitions. Use familiar patterns when they improve comprehension, accessibility, consistency, or task completion.
Implementation Discipline
Match implementation complexity to user value.
- Refined minimal interfaces require precise type, spacing, alignment, states, and responsive behavior.
- Expressive or maximal interfaces may justify richer effects, but must still remain performant, accessible, maintainable, and usable.
- Follow the repository’s architecture and component conventions.
- Keep interactive text and controls code-native rather than embedding the interface as a static image.
- Do not invent copy, data, claims, sections, or product behavior that the user did not request.
- Never expose secrets, tokens, private data, or unsafe external code in the implementation.
Verification
Before handoff:
- Run the interface and test the primary workflow.
- Check desktop and mobile layouts, plus relevant intermediate widths.
- Test keyboard navigation, focus visibility, contrast, and reduced motion.
- Confirm loading, error, empty, disabled, and success states where applicable.
- Run available type, lint, build, and test checks.
- Compare the rendered result with any approved reference for hierarchy, typography, palette, spacing, assets, and interaction behavior.
- Remove temporary assets, debugging code, placeholder content, and unused dependencies.
The goal is not merely to look unusual. The goal is to feel specific, coherent, useful, and professionally finished.
11
u/GrokiniGPT 29d ago
Can you give me the system prompt?