skills.rest
Prat05devs
Prat05devsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

website-product-system

Create website, landing page, and app launch systems from design.md and brand tokens.

2|Updated Jun 19, 2025
Search Tags:#landing page#design system#product launch#website#saas#developer handoff#brand tokens
One-click install
npx skills add https://github.com/Prat05devs/dapper-city-threads --skill website-product-system-prat05devs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-product-system
Source: https://github.com/Prat05devs/dapper-city-threads/tree/main/.agent/skills/website-product-system
Command: npx skills add https://github.com/Prat05devs/dapper-city-threads --skill website-product-system-prat05devs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams launching websites, landing pages, or app products often produce pages that drift from the brand system, lack clear conversion structure, or ignore the actual product UI. This Skill enforces a disciplined workflow that grounds every web page in the project's design.md, tokens, and product screenshots. ## Core Features & Use Cases - Design-grounded page systems: Builds homepage, feature, pricing, and launch pages strictly from design.md, brand architecture, and token files. - Structured section library: Provides purpose-driven section families (hero, problem, solution, social proof, FAQ, CTA) so no section exists without a job. - App launch rule: Derives website visuals from actual app UI—colors, typography, screenshots, and flows—when promoting a product. - Use Case: A founder launching a SaaS dashboard provides design.md and app screenshots; the Skill produces a launch website system with screenshot frames, feature cards, CTA hierarchy, and developer handoff rules. ## Quick Start Use the website-product-system skill to create a launch landing page system for my app based on the attached design.md and product screenshots.

Frequently Asked Questions about website-product-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a landing page that matches my app's design?▼

Start from the actual app UI: its colors, typography, radius, icons, and screenshots. The Skill's app launch rule derives the website's visual system from the product unless design.md explicitly defines a different wrapper identity.

What inputs are required to build a website system with this Skill?▼

It prefers a canonical design.md plus brand-architecture.md, verbal and visual language files, token files, and product screenshots. If design.md is missing or stale, the workflow returns to the context architect before any web work begins.

What sections should a product launch page include?▼

Use only sections with a job: hero, problem, solution, features, social proof, pricing, FAQ, and CTA. The Skill rejects decorative sections and checks that every section moves the story toward the conversion goal.

Does this Skill handle responsive and accessibility requirements?▼

Yes. Its web implementation rules require semantic HTML, CSS variables from tokens, intentional mobile design, reduced-motion respect, and accessibility compliance. Motion is used only when it supports story or state.

When should I not use this website system workflow?▼

Avoid it when no design.md or brand context exists and cannot be created first, since the Skill explicitly blocks web work without canonical design context. It is also not a code-generation tool for full application backends.

Related Skills

Explore More Design & Creative Skills→
laicluselaicluse
4

art-director

Define brand identity, visual language, and design-system architecture before UI implementation.

Official
Advanced
manuscomanusco

resonance-ops-page-audit

Audits live pages and sites from first principles and produces a ranked improvement backlog.

Community
Advanced
MyHeavenDyfMyHeavenDyf

html-ppt-xhs-post

Generate 9-page Instagram carousel graphics from HTML templates.

Community
Intermediate
AradotsoAradotso
3

designmd-supply-generator

Generate a DESIGN.md design system document from a website domain.

Official
Advanced