nexu-io/open-design
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
npx skills add https://github.com/nexu-io/open-design --skill "skills/redesign-skill"Source checked Jul 28, 2026·Refresh due Oct 26, 2026
Reorganized from the pinned upstream SKILL.md
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality.
npx skills add https://github.com/nexu-io/open-design --skill "skills/redesign-skill"The pinned source contains enough sections and task detail for a source-grounded deep guide; automated content is still not an independent test.
2,054 source words · 18 usable sections
Design process
Sections are extracted automatically from the pinned SKILL.md and link back to the source.
When applied to an existing project, follow this sequence:
Check for these problems and fix them:
Check for these problems and fix them:
Pure 000000 background. Replace with off-black, dark charcoal, or tinted dark (0a0a0a, 121212, or a dark navy).
Everything centered and symmetrical. Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.
SkillSignal prompt templates
These prompts were written by SkillSignal from the source structure; they are not upstream text.
Source-grounded prompt
Use for a design task while explicitly checking the source sections.
Use redesign-existing-projects for this design task: [task]. Inputs and constraints: [details]. Work through these pinned SKILL.md sections: “How This Works”, “Design Audit”, “Typography”, “Color and Surfaces”, “Layout”. Cite the concrete requirements that shape each step, do not invent capabilities absent from the source, and verify the result against: [acceptance criteria].
Design checklist
The source section “How This Works” has been checked.
The source section “Design Audit” has been checked.
The source section “Typography” has been checked.
The source section “Color and Surfaces” has been checked.
Static permission evidence
These are source excerpts matched by deterministic rules, not findings of malicious behavior, safety, or actual execution.
Choose a different workflow
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.
Open source detailWhen the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers o
A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.
Open source detailGrounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.
Open source detailFAQ
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality.
The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "skills/redesign-skill". Inspect the command and pinned source before running it.
Static rules flagged read-files in the source; the page lists the matching lines and excerpts.
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Compare before choosing
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers o
Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
Write and maintain DESIGN.md + PRODUCT.md — captures visual decisions and interaction patterns so design tasks stay consistent across sessions without re-scanning past work.
Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.
When applied to an existing project, follow this sequence:
Check for these problems and fix them:
Geist, Outfit, Cabinet Grotesk, Satoshi. For editorial/creative projects, pair a serif header with a sans-serif body.font-variant-numeric: tabular-nums) for data-heavy interfaces.text-wrap: balance or text-wrap: pretty.#000000 background. Replace with off-black, dark charcoal, or tinted dark (#0a0a0a, #121212, or a dark navy).box-shadow. Tint shadows to match the background hue. Use colored shadows (e.g., dark blue shadow on a blue background) instead of pure black at low opacity.#111 in the middle of a cream page.https://picsum.photos/seed/{name}/1920/1080 when real assets are not available. Experiment with background images behind hero sections, feature blocks, or CTAs — even a subtle full-width photo at low opacity adds presence.height: 100vh for full-screen sections. Replace with min-height: 100dvh to prevent layout jumping on mobile browsers (iOS Safari viewport bug).scale(0.98) or translateY(1px) on press to simulate a physical click.window.alert().#. Either link to real destinations or visually disable them.scroll-behavior: smooth.top, left, width, height. Switch to transform and opacity for GPU-accelerated, smooth animation.99.99%, 50%, $100.00. Use organic, messy data: 47.2%, $99.00, +1 (312) 847-1928.<nav>, <main>, <article>, <aside>, <section>.%, rem, em, max-width) for flexible layouts.alt="" or alt="image" on meaningful images.9999. Establish a clean z-index scale in the theme/variables.package.json or the project dependencies.<title>, description, og:image, and social sharing meta tags.When upgrading a project, pull from these high-impact techniques to replace generic patterns:
backdrop-filter: blur. Add a 1px inner border and a subtle inner shadow to simulate edge refraction.Apply changes in this order for maximum visual impact with minimum risk: