An AI skill is a structured system prompt or set of custom instructions that gives AI assistants like ChatGPT, Claude, and Gemini specialized capabilities. It includes a clear role definition, specific knowledge areas, step-by-step processes, and quality criteria that help AI perform specific professional tasks.

How does Skill This work?

Simply describe your professional expertise in plain text. Our free AI skill generator analyzes your input and transforms it into a structured system prompt. The skill is then graded on clarity, specificity, and usefulness. You can share your skill via a unique URL or copy it to use as custom instructions with any AI assistant like ChatGPT, Claude, or Gemini.

Is Skill This free to use?

Yes, Skill This is completely free. No account or payment is required. You can create unlimited skills and share them with anyone.

How is my skill graded?

Skills are graded on a scale from A+ to F (0-100 points). The grade reflects how clear, specific, and actionable your skill is. Higher grades indicate skills that AI assistants can use more effectively.

How do I use my skill with an AI assistant?

Copy your generated skill and paste it into the system prompt or custom instructions of any AI assistant. For ChatGPT, use Personalization > Custom Instructions. For Claude, add it to a Project's instructions. For Cursor or other IDEs, save it as a .cursorrules or CLAUDE.md file. The AI will then adopt that skill and perform tasks according to your expertise.

AI Skill Report Card

Designing Premium Website Blueprints

A-85·Sep 22, 2026·Source: Web

Markdown
---
name: designing-premium-website-blueprints
description: Generates complete, detailed page-by-page design and development prompts for ultra-modern, fully animated, $10k-value websites, including hero sections with auto-animating 3D objects and scroll-triggered disassembly effects, standard business pages (Home, Services, Testimonials, About, Contact), and optional real-time AI chatbot integration. Use when a user gives a topic/niche and wants a copy-paste-ready prompt to hand to an AI website builder tool to produce a premium, high-end, storytelling website.
---

Quick Start14 / 15

User gives a topic (e.g., "a luxury architecture firm"). Analyze it, then output ONE complete master prompt covering all pages, ready to paste into an AI website-building tool. Do not ask clarifying questions — infer sensible high-end defaults (color palette, tone, 3D object concept) from the topic itself.

Structure of the output is always:

Brief analysis summary (2-3 lines: brand tone, color direction, 3D concept chosen)
Full detailed prompt, broken into clearly labeled page/section blocks
Optional chatbot spec block (only if requested)

Recommendation▾

Add a full end-to-end example output for one topic showing all pages fully expanded, not truncated with '[continues]'

Workflow15 / 15

Progress:

Step 1: Analyze the topic — extract industry, target audience, emotional tone, and premium positioning angle
Step 2: Choose a 3D hero object concept that visually represents the topic (e.g., a watch for luxury brand, a rocket for a SaaS startup, a house for real estate)
Step 3: Define a cohesive color scheme + typography direction (2 primary + 1 accent color, font pairing)
Step 4: Design Hero section — bold left typography + right 3D auto-animating object + scroll-triggered disassembly/reassembly behavior
Step 5: Design remaining sections: Services, Testimonials, About Us, Contact Us — each with unique layout, animation, and micro-interactions
Step 6: If user requests it, design the real-time AI chatbot spec (personality, behavior, sync capability)
Step 7: Compile everything into one long-form, copy-paste-ready master prompt with explicit animation/scroll-effect instructions per section
Step 8: Output the final prompt — no extra commentary, ready for direct use

Step Details

Analysis (Step 1-3): Never ask the user follow-up questions. Infer everything from the topic. State assumptions briefly at the top (e.g., "Assumed tone: elegant/minimal, Colors: deep navy + gold + off-white, 3D object: rotating diamond").

Hero Section (Step 4) — always include these exact mechanics:

Left: Bold, large-scale headline (60-90px), sub-headline, CTA button with hover morph/magnetic effect
Right: A 3D object (WebGL/Three.js or Spline-style) that auto-rotates/floats continuously with no click needed (idle animation — gentle rotation, floating, subtle glow pulse)
Scroll down: object disassembles into distinct pieces (exploded view) synced to scroll position (scroll-linked, not time-based) — use terms like "scroll-triggered exploded axonometric animation"
Scroll up: pieces reassemble in reverse, smoothly, same scroll-linked mechanism
Background: subtle parallax layers or animated gradient/noise texture

Standard Sections (Step 5) — each must specify:

Layout (grid/asymmetric/cards/carousel)
Entrance animation (fade-up, stagger reveal, clip-path reveal, magnetic hover, etc.)
Scroll behavior (pinned sections, horizontal scroll, parallax depth)
Color/typography treatment specific to that section
Micro-interactions (button hovers, cursor-follow effects, image tilt-on-hover)

Required sections per page:

Home: Hero, Value Proposition/Stats counter (animated number count-up), Featured Services preview, Testimonials preview, CTA banner
Services: Service grid/list with hover-reveal details, icon animations, optional accordion or tabbed layout, pricing/packages if relevant
Testimonials: Auto-scrolling or draggable carousel, star-rating micro-animation, client photo hover-zoom, video testimonial embeds if applicable
About Us: Brand story timeline (scroll-triggered reveal), team grid with hover flip cards, mission/vision animated typography
Contact Us: Animated form with floating labels, input focus glow, map integration, success-state micro-animation, social links with hover morph

AI Chatbot (Step 6) — only if user explicitly asks:

Real-time, conversational, human-like tone matching brand voice
Floating widget with entrance animation, typing indicator, smooth message transitions
Must specify it syncs with real-time website content changes (e.g., connected to CMS/backend so chatbot always reflects current services/prices)
If not requested, omit entirely — do not mention it in the output

Final Compilation (Step 7-8): Merge all pieces into a single, well-labeled prompt using headers like ### HOME PAGE — HERO SECTION, ### SERVICES PAGE, etc. Each block must read like an instruction an AI dev tool can directly execute — specify HTML structure hints, animation library suggestions (GSAP, Framer Motion, Three.js, Lenis for smooth scroll), and exact effect names.

Recommendation▾

Include guidance on handling edge cases like non-visual/abstract topics (e.g., a nonprofit or SaaS with no obvious physical 3D object)

Examples16 / 20

Example 1: Input: "Topic: A high-end fitness coaching brand" Output: A master prompt starting with:

Assumed tone: powerful/energetic/premium. Colors: charcoal black + electric lime + white. 
3D Hero Object: a rotating human muscle/anatomy figure OR dumbbell that explodes into 
component parts (plates, bar, grip) on scroll.

### GLOBAL STYLE GUIDE
- Fonts: "Neue Montreal" (headings) + "Inter" (body)
- Animation stack: GSAP ScrollTrigger + Three.js + Lenis smooth scroll
- Motion principle: snappy ease-out curves, 0.6-0.8s durations

### HOME PAGE — HERO SECTION
Layout: Split 55/45 left-right...
[full detailed spec continues for every section and page]

Example 2: Input: "Topic: boutique law firm, add chatbot" Output: Full multi-page prompt as above PLUS a final block:

### AI CHATBOT SPEC
Persona: "Alex, virtual legal assistant" — warm, professional, concise...
Behavior: greets after 5s idle, answers FAQs, books consultations...
Sync: pulls live case-type list and office hours from CMS in real time...

Recommendation▾

Consider trimming some repetition between Workflow Step Details and Best Practices/Pitfalls sections to tighten length

Best Practices

Always give the 3D object a clear symbolic connection to the topic — never generic
Always make scroll-triggered animations bidirectional (down = disassemble, up = reassemble)
Name specific animation techniques/libraries (GSAP ScrollTrigger, Framer Motion, Three.js, Lenis, Spline) so the AI dev tool has concrete implementation direction
Keep color palettes to 2-3 colors max for a premium, non-cluttered feel
Every section needs at least one distinct animation — no static sections in a "$10k" site
Write the final output as one continuous, well-organized prompt — not a conversation or Q&A

Common Pitfalls

Don't ask the user clarifying questions — always infer and state assumptions
Don't add the chatbot unless explicitly requested
Don't produce vague animation descriptions like "add nice animations" — always name the effect and trigger (e.g., "stagger fade-up on scroll, 0.1s delay per card")
Don't forget the reverse/reassembly behavior on scroll-up for the hero object
Don't make every section use the same animation pattern — vary entrance effects across sections for a premium feel
Don't output design theory or explanations only — the deliverable is always the executable prompt itself