Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

web-design

Estrelas1

Forks0

Atualizado8 de maio de 2026 às 16:09

Build distinctive, production-grade frontend interfaces with high design quality. Use when asked to build websites, landing pages, dashboards, web apps, or any web UI that should look polished and modern. Generates creative, polished code that avoids generic AI aesthetics. Includes Yesterday corporate identity briefing for branded reports and deliverables.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

Yesterday-AI

Yesterday-AI/skills

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores de softwareInformática e Matemática·SOC 15-1252

Explorador de arquivos

3 arquivos

SKILL.md

readonly

Mais deste repositório

mesmo repositório

wrapup

Yesterday-AI/skills

Generic end-of-conversation sweep -- works in any project, at any point. Looks at what the current repo actually has (docs, planning files, agent context, changelog, ADRs, memory layers...) and proposes which of them to extend with the learnings, decisions, and follow-ups that surfaced in the conversation. Then prepares a paste-ready resume prompt for after /compact. Use when the user says "wrapup", "wrap up", "wrap things up", "lass uns wrappen", or before /compact.

2026-05-251

excalidraw-diagram

Yesterday-AI/skills

Create Excalidraw diagram JSON files that make visual arguments -- workflows, architectures, concepts. Use when the user wants to visualize systems, processes, or ideas as .excalidraw files. Covers design methodology, section-by-section building, render-validate loop, and quality checklist.

2026-05-221

webflow

Yesterday-AI/skills

Manage Webflow sites via the official Webflow MCP server -- pages, CMS, assets, components, styles, variables, custom code, comments, localization, and publishing. Covers the headless Data API tools and the Designer API tools (which need the Webflow Designer open in the foreground). Use when: reading, auditing, or editing a Webflow site; building or duplicating pages; managing CMS collections or assets; or adding legal/marketing pages. This plugin ships the Webflow MCP server; just authenticate (OAuth).

2026-05-221

create-shareable-skill

Yesterday-AI/skills

Turn an existing skill or a fresh idea into a catalog-ready shareable skill -- run the quality gate, decide public-vs-private catalog and standalone-vs-bundle placement, pick the category, scaffold SKILL.md (+ optional .plugin.json), update the catalog docs, and open a PR to main. Use when adding a new skill to this repo, promoting a personal or ad-hoc skill into a shareable one, or routing a skill into the right catalog.

2026-05-141

paperclip-api

Yesterday-AI/skills

Manage Paperclip AI companies, agents, issues, projects, goals, routines, costs, and secrets via REST API. Use when creating companies, hiring agents, assigning tasks, managing budgets, approving hires, or checking dashboards on a Paperclip instance.

2026-05-101

butler-deploy

Yesterday-AI/skills

Publish or update an HTML5 game on itch.io via the butler CLI. Covers install, login, channel push with versioning, and first-time page setup. Use when deploying a web game build (e.g. dist/) to an itch.io channel.

2026-05-081

name	web-design
description	Build distinctive, production-grade frontend interfaces with high design quality. Use when asked to build websites, landing pages, dashboards, web apps, or any web UI that should look polished and modern. Generates creative, polished code that avoids generic AI aesthetics. Includes Yesterday corporate identity briefing for branded reports and deliverables.
metadata	{"category":"design"}

Web Design -- Beautiful Modern Websites

Sources & Attribution

This skill is composed from and inspired by:

Source	Skill	License	URL
anthropics/skills	`frontend-design`	Apache 2.0	https://github.com/anthropics/skills/tree/main/skills/frontend-design
anthropics/skills	`web-artifacts-builder`	Apache 2.0	https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
anthropics/skills	`theme-factory`	Apache 2.0	https://github.com/anthropics/skills/tree/main/skills/theme-factory
athina-ai/goose-skills	`create-html-slides`	MIT	https://github.com/athina-ai/goose-skills/tree/main/skills/capabilities/create-html-slides
msitarzewski/agency-agents	`design-ui-designer`	MIT	https://github.com/msitarzewski/agency-agents/blob/main/design/design-ui-designer.md
msitarzewski/agency-agents	`design-whimsy-injector`	MIT	https://github.com/msitarzewski/agency-agents/blob/main/design/design-whimsy-injector.md

Design analysis references (studied for real-world patterns):

https://paperclip.ing/ -- Refined warm minimalism, Instrument Serif + Inter, glassmorphic nav, orchestrated scroll animations
https://skills.gooseworks.ai/ -- Anti-SaaS editorial warmth, linen-beige canvas, zero shadows, per-item pastel identity

1. Design Thinking (before any code)

Before writing a single line, commit to a BOLD aesthetic direction:

Purpose: What problem does this interface solve? Who uses it?
Tone: Pick a strong flavor -- brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, neon cyber, vintage editorial, Swiss modern, warm editorial, anti-SaaS calm…
Constraints: Framework, performance targets, accessibility level (WCAG AA minimum)
Differentiator: What makes this UNFORGETTABLE? What's the one thing someone remembers?

CRITICAL: Bold maximalism and refined minimalism both work -- the key is intentionality, not intensity. Choose a direction and execute with precision.

Real-World Aesthetic Archetypes (studied from live sites)

"Warm Technical" (paperclip.ing style):

Serif headlines (Instrument Serif) + sans body (Inter) + mono code (JetBrains Mono)
Monochromatic warm palette (off-whites #f5f3f0, #f0ece7) with ONE semantic accent color (green = "alive")
Glassmorphic floating pill navbar (backdrop-filter: blur(20px) saturate(1.4))
1px-gap grid technique (parent bg = border color, gap = 1px) for seamless divider lines
Orchestrated IntersectionObserver scroll reveals with staggered calc(var(--i) * .14s) delays
Full-width hero image at 65vh with content overlapping upward via negative margin
Interactive CSS/JS data visualizations as feature demos (not static screenshots)

"Anti-SaaS Editorial" (gooseworks style):

System UI fonts, extrabold 44px headings, tight -0.02em letter-spacing
Warm linen canvas background (#D9D5CE) -- like unbleached paper
Zero shadows, zero gradients -- flat surfaces with color contrast and 1.5px borders only
Per-item muted pastel identity colors (sage #B8D4A3, lavender #C5B3D9, teal #A3C9C9)
Decorative blur circles (semi-transparent, positioned off-edge) for organic depth
Deliberate stillness -- minimal to no animation, favoring calm authority
Generous 1127px max-width with ample side margins

2. Anti-AI-Slop Rules

NEVER produce generic "AI-generated" aesthetics:

DO NOT use	Instead
Inter, Roboto, Arial, system-ui as display fonts	Distinctive fonts: Instrument Serif, Syne, Clash Display, Cormorant, Fraunces, Bodoni Moda, Outfit, Archivo Black, JetBrains Mono…
Purple gradients on white	Bold palettes with dominant color + sharp accent. Use the theme system below or create bespoke palettes.
Indigo `#6366f1` everywhere	Context-specific color choices that match the aesthetic
Centered hero + cards grid (the default)	Asymmetry, overlap, diagonal flow, grid-breaking, generous negative space OR controlled density
Uniform rounded corners everywhere	Mix sharp and soft, or commit fully to one
Generic stock photo placeholders	Gradient meshes, noise textures, geometric patterns, layered transparencies, grain overlays
Box shadows on everything	Consider: no shadows at all (flat + borders), OR dramatic shadows with purpose
Generic pure-white `#ffffff` backgrounds	Warm whites (`#f5f3f0`, `#faf9f6`), tinted canvases (`#D9D5CE`), or committed dark
Space Grotesk as the "creative" choice	It's overused. Explore: Manrope, Plus Jakarta Sans, Satoshi, DM Sans, Nunito

Every design must be different. Vary light/dark, fonts, layouts, color systems. Never converge on the same choices across generations.

3. Frontend Aesthetics Guidelines

Typography

Pair a distinctive display font with a refined body font
Use Google Fonts, Bunny Fonts, or self-hosted -- load via <link> or @import

Size with clamp() for fluid responsiveness:

h1 { font-size: clamp(2.8rem, 7vw, 4.5rem); line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
body { font-size: clamp(0.95rem, 1.2vw, 1.15rem); line-height: 1.6; }

Color & Theme

Use CSS custom properties for the entire palette
Dominant color with sharp accents outperforms timid, evenly-distributed palettes
Single-accent discipline works: one accent color with semantic meaning (e.g., green = active/alive), everything else monochrome
Always define both light and dark theme variables
Warm-shift your grays -- pure grays feel clinical, warm grays (#888880, #4a4a4a) feel intentional
Ensure WCAG AA contrast (4.5:1 minimum for text)

Motion & Micro-interactions

One well-orchestrated page load with staggered reveals (animation-delay) > scattered micro-interactions
Stagger pattern: animation-delay: calc(var(--i) * 0.14s + 80ms) -- set --i per element via style attribute
Hover states that surprise and delight
Scroll-triggered animations via IntersectionObserver (add .is-visible class on enter)
CSS-only where possible; use Framer Motion / Motion library for React when needed
Custom easing: cubic-bezier(0.16, 1, 0.3, 1) (smooth out), cubic-bezier(0.34, 1.56, 0.64, 1) (spring/bounce)
Respect prefers-reduced-motion
Valid choice: zero animation -- deliberate stillness conveys calm authority (gooseworks approach)

Spatial Composition

Unexpected layouts: asymmetry, overlap, diagonal flow
Grid-breaking elements that draw the eye
Generous negative space OR controlled density -- both work if intentional
Asymmetric column splits (5fr 7fr, 1fr 1.2fr) feel more dynamic than equal widths
Overlap elements with negative margins for depth

Backgrounds & Atmosphere

Create depth: gradient meshes, noise textures, geometric patterns
Layered transparencies, dramatic shadows, decorative borders
Glassmorphism: backdrop-filter: blur(20px) saturate(1.4) with low-alpha backgrounds
Custom cursors, grain overlays, subtle parallax
OR: flat and borderless -- atmosphere via color alone (gooseworks approach)
Match effects to the overall aesthetic -- restraint for minimal, elaborate for maximal

4. Design Token System

Use CSS custom properties for a complete token system:

:root {
  /* Spacing -- fluid with clamp */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: clamp(2rem, calc(1.5rem + 1.5vw), 3rem);
  --space-xl: clamp(3rem, calc(2rem + 3vw), 5rem);
  --space-2xl: clamp(4rem, calc(2.5rem + 4.5vw), 7rem);
  --space-section: clamp(5rem, calc(3rem + 5.5vw), 9rem);

  /* Colors -- override per theme */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f3f0;
  --color-surface: #f0ece7;
  --color-surface-raised: #e8e4de;
  --color-border: #e0dcd6;
  --color-text: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #888880;
  --color-accent: #22c55e;
  --color-accent-subtle: #22c55e33;

  /* Typography */
  --font-display: 'Instrument Serif', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.16);
  --shadow-glow: 0 0 20px var(--color-accent-subtle);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 100px;
  --radius-full: 9999px;
}

5. Ready-Made Theme Palettes

Pick one as a starting point or create a bespoke palette:

Theme	Background	Accent	Secondary	Text	Fonts
Warm Technical	`#ffffff` / `#f5f3f0`	`#22c55e`	`#f0ece7`	`#1a1a1a`	Instrument Serif / Inter / JetBrains Mono
Linen Editorial	`#D9D5CE` / `#F5F4F1`	`--olive`	per-item pastels	`#1A1A1A`	System UI extrabold / System UI
Ocean Depths	`#1a2332`	`#2d8b8b`	`#a8dadc`	`#f1faee`	DejaVu Sans Bold / DejaVu Sans
Sunset Boulevard	`#264653`	`#e76f51`	`#f4a261`	`#e9c46a`	DejaVu Serif Bold / DejaVu Sans
Forest Canopy	`#2d4a2b`	`#7d8471`	`#a4ac86`	`#faf9f6`	FreeSerif Bold / FreeSans
Modern Minimalist	`#36454f`	`#708090`	`#d3d3d3`	`#ffffff`	DejaVu Sans Bold / DejaVu Sans
Golden Hour	`#4a403a`	`#f4a900`	`#c1666b`	`#d4b896`	FreeSans Bold / FreeSans
Arctic Frost	`#fafafa`	`#4a6fa5`	`#d4e4f7`	`#333`	DejaVu Sans Bold / DejaVu Sans
Desert Rose	`#e8d5c4`	`#d4a5a5`	`#b87d6d`	`#5d2e46`	FreeSans Bold / FreeSans
Tech Innovation	`#1e1e1e`	`#0066ff`	`#00ffff`	`#ffffff`	DejaVu Sans Bold / DejaVu Sans
Botanical Garden	`#f5f3ed`	`#4a7c59`	`#f9a620`	`#b7472a`	DejaVu Serif Bold / DejaVu Sans
Midnight Galaxy	`#2b1e3e`	`#4a4e8f`	`#a490c2`	`#e6e6fa`	FreeSans Bold / FreeSans
Neon Cyber	`#0a0e27`	`#00ffff`	`#ff00ff`	`#e0e0ff`	Clash Display / Satoshi
Terminal Green	`#0d1117`	`#39d353`	`#238636`	`#c9d1d9`	JetBrains Mono
Swiss Modern	`#ffffff`	`#ff0000`	`#000000`	`#333`	Archivo / Nunito
Paper & Ink	`#f5f0e8`	`#2c1810`	`#8b4513`	`#333`	Cormorant Garamond / Source Serif 4

6. Proven Component Patterns

Glassmorphic Floating Navbar

.nav {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 680px;
  width: calc(100% - 2rem);
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), inset 0 1px rgba(255, 255, 255, 0.25);
  padding: 0.5rem 1.5rem;
  z-index: 100;
}

1px-Gap Grid Dividers (no borders needed)

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border); /* gap color = divider color */
}
.feature-grid > * {
  background: var(--color-bg); /* cell bg covers the parent bg */
  padding: var(--space-lg);
}

Hero with Overlapping Content

.hero-image {
  width: 100%;
  height: 65vh;
  object-fit: cover;
}
.hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.4) 40%, rgba(255,255,255,0.85) 70%, #fff 100%);
}
.hero-content {
  position: relative;
  margin-top: -6rem;
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

Scroll-Triggered Entrance (JS + CSS)

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.24s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.38s; }

const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('is-visible'); });
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

Decorative Blur Circles (organic depth)

.card-visual {
  position: relative;
  background: #B8D4A3; /* per-item pastel */
  border-radius: 20px;
  overflow: hidden;
}
.card-visual::before,
.card-visual::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
}
.card-visual::before {
  width: 120px; height: 120px;
  bottom: -20px; right: -20px;
  background: rgba(26, 26, 26, 0.08);
}
.card-visual::after {
  width: 60px; height: 60px;
  top: -10px; left: -10px;
  background: rgba(26, 26, 26, 0.06);
}

7. Whimsy & Delight Layer (optional)

Add personality with micro-interactions when the design calls for it:

/* Button hover with scale + glow */
.btn-delight {
  transition: all var(--duration-normal) var(--ease-out);
}
.btn-delight:hover {
  transform: scale(1.02) translateY(-1px);
  box-shadow: var(--shadow-glow);
}

/* Staggered entrance animations */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.stagger > * {
  animation: fadeSlideUp 0.6s var(--ease-out) backwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.1s; }
.stagger > *:nth-child(2) { animation-delay: 0.2s; }
.stagger > *:nth-child(3) { animation-delay: 0.3s; }

/* 3D tilt on hover */
.tilt-card {
  transition: transform var(--duration-normal) var(--ease-out);
  transform-style: preserve-3d;
}
.tilt-card:hover {
  transform: perspective(800px) rotateX(2deg) rotateY(-3deg);
}

/* Noise texture overlay */
.noise::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* Logo grayscale-to-color reveal */
.logo-item {
  filter: grayscale(1) opacity(0.5);
  transition: filter 0.3s ease;
}
.logo-item:hover {
  filter: grayscale(0) opacity(1);
}

/* Animated cost/progress bar */
.bar-fill {
  width: 0;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar-fill.is-visible {
  width: var(--fill-percent);
}

Playful Microcopy Ideas

Context	Generic	Delightful
Loading	"Loading..."	"Brewing something good..."
Empty state	"No items found"	"It's quiet here. Too quiet."
Success	"Saved successfully"	"Locked in. You're golden."
Error	"Something went wrong"	"Well, that didn't go as planned."
404	"Page not found"	"You've wandered off the map."

8. Tech Stack Reference

Vanilla HTML/CSS/JS (simplest)

Best for: landing pages, single-page sites, static content.

HTML5 + Tailwind CSS (CDN or build) + vanilla JS
Astro for multi-page static sites (paperclip.ing uses Astro v5)

React + shadcn/ui (component-rich)

Best for: dashboards, web apps, interactive UIs.

pnpm create vite my-app --template react-ts
pnpm install tailwindcss postcss autoprefixer class-variance-authority clsx tailwind-merge lucide-react

40+ shadcn/ui components available: accordion, button, card, dialog, dropdown-menu, form, input, select, sheet, table, tabs, toast, tooltip...

Next.js / Astro (full-featured)

Best for: multi-page sites, blogs, documentation, SSR/SSG.

9. Responsive Design

Mobile-first with fluid scaling:

/* Fluid container */
.container {
  width: min(90%, 1140px);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Breakpoints */
@media (max-width: 900px) { /* Large tablet */ }
@media (max-width: 768px) { /* Tablet */ }
@media (max-width: 640px) { /* Small tablet */ }
@media (max-width: 480px) { /* Mobile */ }

Viewport-fitting (for full-screen sections)

.hero { min-height: 100dvh; display: grid; place-items: center; }

10. Accessibility Baseline (WCAG AA)

Color contrast: 4.5:1 for normal text, 3:1 for large text
Focus indicators: visible, high-contrast outlines on all interactive elements
Semantic HTML: proper heading hierarchy, landmarks, alt text
Keyboard navigation: all interactive elements reachable via Tab
Reduced motion: @media (prefers-reduced-motion: reduce) for all animations
Tabular numbers for data: font-variant-numeric: tabular-nums

11. Yesterday Corporate Identity

When building output for Yesterday Consulting (reports, analyses, proposals, presentations), apply the Yesterday CI instead of a custom aesthetic.

Full briefing: references/yesterday-ci-briefing.md Canonical source: Yesterday-AI/consulting-projects/templates/operations/yesterday-ci-briefing.md Future home: The CI briefing will move to a dedicated branding repo under skills/.

Quick Reference

Fonts: Source Serif 4 (display), DM Sans (body), IBM Plex Mono (kickers/labels/meta)
Brand colors: --y-orange: #FC4E14, --y-gold: #FFBB38, neutrals #0A0A0A → #F5F5F5
Output: Self-contained .html, no build tools, opens in browser
Nav: Sticky top bar with "Yesterday" wordmark + context on right
Kickers: 01 -- SECTION NAME format, mono font, orange
Footer: "Yesterday Consulting -- yesterday.company" + "Vertraulich"
Language: German body copy, English class names
Key components: .hero, .score-bar, .section-kicker, .issue (with severity), .pullquote, .verdict, .clean-table, .photo-break

When the Yesterday CI applies, skip §1-§5 of this skill (aesthetic choice, anti-AI-slop, custom palettes) -- the CI briefing defines all design decisions. Use §6-§10 (components, motion, responsive, accessibility) as supplementary guidance.

12. Workflow

Clarify -- Understand purpose, audience, constraints. If Yesterday CI applies → use §11 briefing, skip to step 5.
Choose aesthetic -- Pick a bold direction (see §1 archetypes)
Select palette -- Use a theme (§5) or create bespoke
Set up tokens -- Define CSS custom properties (§4)
Build structure -- Semantic HTML, layout with CSS Grid/Flexbox
Style -- Apply typography, colors, spacing, backgrounds
Components -- Use proven patterns (§6) where they fit
Animate -- Add motion and micro-interactions (§7) -- or choose deliberate stillness
Responsive -- Test and adjust for all viewports (§9)
Accessibility -- Verify contrast, keyboard nav, screen readers (§10)
Polish -- Final details, whimsy, edge cases