Art & Design

Redesign or build a landing page in a warm "paper notebook" style — cream paper, chunky soft serif headlines, handwritten marker notes, yellow sticky notes, name-label notebooks, illustrated scenes with roman-numeral feature panels, doodle grids, lined-paper lists, comic-strip storytelling and a giant orange footer. Use when the user asks for a paper-notebook / scrapbook / sticky-note / playful-education look, or wants a friendly, trustworthy landing page for education, student services or family-facing products. Produces a single self-contained HTML file with scroll-driven notebook animation, auto-sizing comic speech bubbles and optional multi-language switching.

Build a single-file HTML landing page with a real design system — specific copy, strong type hierarchy, one accent color, and none of the generic "AI landing page" look. Use when asked for a landing page, product page, homepage hero, or LP.

Build an editorial "orbit" homepage on deep ink and warm paper — giant tight sans headlines with one outlined line and one orange line that drift against the mouse, a CSS planet in tilted 3D orbits surrounded by floating paper cards (a destination ticket that cycles, a passport stamp card, a small photo print) that parallax with the cursor, a particle network canvas that reacts to the pointer, a tilted orange ticker, poster cards where real photography is blended in grayscale with multiply under huge letters and a coloured sun disc (colour returns on hover), a tabbed "route console" with a giant number in an orbit ring, support cards with blended photos and cursor light, and a full-bleed orange final call. Use for travel brands, trip planners, study-abroad or relocation agencies, tourism boards, culture and event sites, or when the user wants an editorial, poster-like, mouse-reactive homepage that mixes graphic design with their own photographs. Produces one HTML file plus an asset...

Build a new design system from scratch, or audit/evolve an existing one. Trigger on "design system", "component library", "design tokens", "style guide", "audit my design system", "compare design systems", "harden my design system", or when asked to build reusable UI infrastructure meant to span more than one project.

Build a single-file, conversion-focused landing page (HTML + inline CSS) from a short product brief. Use when asked for a landing page, sales page, waitlist page, launch page or "a page for my offer".

Use when asked to QA, review or check a web page - "run a full QA", "check the paddings", "does this work on mobile", "act as a designer and review this" - after any milestone build, or before handing any page back as finished.

Generate a polished hero landing page as one self-contained HTML file, with a working demo of the product's interface as the centerpiece. Use when asked for a landing page, hero section, marketing page or product homepage mockup.

Generate a brand-specific, audience-targeted landing page as a deployable React artifact. Supports multiple framing modes — challenge, course, sprint, bootcamp, workshop — with the same conversion architecture throughout. Takes a brand URL, Brand Profile, and/or Audience Intelligence profile and produces a fully populated page with real, on-brand, audience-specific copy. Use this skill whenever Rodney (or a client) needs to see what a finished offer page looks like. Trigger on 'build a landing page for [brand/client]', 'create a challenge page', 'create a course page', 'build a sprint landing page', 'show them what done looks like', 'generate a landing page from this brand profile', 'build the page for this client', 'turn this offer into a landing page', or any request to produce a ready-to-present offer landing page for a specific brand. Always use this skill before writing landing page copy by hand. Also trigger on 'landing-eec' or 'landing eec'.

Use when laying out or restyling a web page section - spacing between sections, type scale, card grids, stat and number blocks, logo strips, the first screen - or when a page technically works but looks templated, uneven, loose or unfinished.

Design and build distinctive, high-impact websites and clickable, presentation-ready prototypes for any industry, language, or site type from business briefs, public links, local media, existing sites, or product requirements. Use for brand and corporate sites, landing pages, ecommerce, SaaS and product sites, portfolios, editorial and content sites, education and nonprofit sites, events and communities, local and hospitality businesses, campaigns, web product interfaces, and website UI redesigns. Support Chinese, English, Japanese, Korean, and multilingual experiences without defaulting to one locale or visual style. Also use for requests mentioning 网站原型, 宣传网站, 企业官网, 营销官网, 电商网站, 落地页, 内容网站, 官网重构, 可点击演示, website prototype, landing page, or redesign.

Use when building or restructuring a Webflow page through the Webflow MCP Designer tools - inserting sections, styling elements, uploading assets, adding custom code or scripts, previewing a draft, publishing to staging - or when a change reported success but did not appear on the page.

Build premium, ThemeForest-top-seller-grade websites for SaaS, AI products, agencies, startups and tech portfolios — sculpted color glows, animated gradient borders, tactile glossy buttons, glass navs, bento grids with mini product UIs, giant tight-tracked headlines, scroll-scrubbed text reveals, smooth scroll and GSAP motion. Use this skill whenever the user asks for a landing page, homepage, marketing site, pricing page, waitlist page, product page or portfolio for a SaaS / AI / tech / agency / startup brand, or says things like "make it look premium / expensive / modern / like a top template", "Vercel/Linear/Framer style", "dark glowing hero", "glassmorphism", or asks for a friendly, warm, indie-style landing for a desktop/menu-bar/mobile app or utility — in any language, and even if they don't name a style. Also use it when redesigning an existing tech/SaaS page to look higher-end.

Apple.com / iOS 26 look and feel for web apps (plain HTML/CSS/JS, PWAs, Cloudflare Workers sites, Capacitor-wrapped apps), distilled from a shipped iPhone-first app: Apple daytime tokens with automatic dark mode, huge keynote titles with full stops, two-tone section heads, borderless tiles, blue pill buttons, sliding pill switchers, a frosted or Liquid Glass tab bar that tucks on scroll, bottom sheets, toasts, iOS alerts and switches, thin big numbers, and in-place motion (morph, FLIP, number roll, springy presses, haptic ticks) that respects Reduced Motion. Use this skill whenever the user wants a web UI to look or feel like Apple, iPhone, iOS or Apple.com, mentions Liquid Glass, keynote style, "make it look like Apple", or asks to polish, redesign or build screens for a web or PWA app in that style — even if they don't say "Apple". For React Native / Expo apps use apple-design-system instead.

The live web data engine. Search API: the most accurate web search API in the world, $5 per 1,000 searches (specstream.ai/benchmarks). Extract API: $0.80 per 1,000 pages. Deep Search: structured rows.

Build a personal portfolio site with a 3D hero, animated objects for each interest, visual case studies and a working contact form (tRPC, Resend, Turnstile, Postgres), then deploy it to Vercel. Use when someone asks for a portfolio, personal site or "3D portfolio" and wants something more distinctive than a template.

Crea landing pages premium con un objeto 3D protagonista (cualquier objeto, sea producto, gadget, botella, mueble, auto, joya, instrumento, maqueta, obra de arte, comida o juguete) que se mueve, se revela y cambia al hacer scroll, con la calidad de toppervenom.com o de las páginas de Apple. Cubre todo el proceso en HTML/CSS/JS vanilla + Three.js — concepto y dirección de arte, conseguir el modelo 3D (escaneo/fotogrametría con celular, Blender, IA image-to-3D, CAD, compra o procedural), optimizar el .glb, luz de estudio, shaders de revelado (wireframe→sólido, despiece, puntos, corte), variantes de color, cotas y callouts SVG, coreografía por scroll y pulido. Usala siempre que el usuario quiera una web o landing con un objeto 3D interactivo, un "scrollytelling", mostrar algo en 3D, escanear un objeto o convertir fotos en 3D para la web, o replicar "esa web con el 3D que se arma al scrollear", aunque no nombre Three.js.

Construir interfaces web cinematográficas e scroll-driven com Next.js + Tailwind + GSAP + ScrollTrigger + Lenis, com movimento "intencional" (lento, fluido, com cara de filme) em vez de transições genéricas. Use esta skill SEMPRE que o pedido envolver: scroll suave (smooth scroll / Lenis), animações de scroll (ScrollTrigger, pin, parallax, reveal, scrub, stagger), hero cinematográfico com vídeo de fundo, "site com cara de filme / cinematic", "movimento de câmera no scroll", GSAP em React/Next, ou qualquer pedido para deixar uma landing page "mais fluida", "mais elegante", "mais premium" no quesito movimento. Use também quando for criar o CLAUDE.md / a "bíblia" de um projeto front-end de animação, ou quando uma animação GSAP estiver "quebrando/instável no mobile". Não use para CSS/layout estático sem movimento, nem para dashboards de dados — aqui o foco é MOVIMENTO com intenção.

B2B 外贸独立站有两种入口：实际查看客户现有网站和主要竞品，出技术诊断与功能/插件线索差距报告；或通过少量客户问题从零规划建站。两者均交付八层选型、插件/邮箱/客服、明确的 CDN 接入与缓存规则、SEO 和询盘方案。区分前端可见证据与后台推断，不直接实施建站或发布。

Expert guidance, patterns, and code implementations for creating fluid, high-performance animations, micro-interactions, layout transitions, and motion design across web (CSS, Framer Motion, GSAP, Three.js, Canvas), mobile, and desktop applications. Activate whenever the user requests animations, transitions, motion graphics, interactive UI effects, or dynamic visual feedback.

Build conversion-focused marketing pages with a clear hero, social proof, features, pricing, FAQ and a final call to action, using the app's section blocks.

Acompaña paso a paso a una persona a armar su portafolio de inversión a partir de sus estados de cuenta, capturas, PDFs y factsheets, clasifica cada producto en las categorías y subcategorías de la plantilla (Inversiones Directas, Mercados Privados, Club Deals, Mercados Públicos, Otros, Cash) y entrega un dashboard con el Excel descargable. Úsala cuando alguien suba documentos de inversiones o pida armar, clasificar, continuar o actualizar su portafolio.

Pick, preview, and apply color palettes from Sanzo Wada's A Dictionary of Color Combinations (348 combos, 159 colors) to websites, Tailwind/shadcn themes, designs, or outfits, with a live theme-switcher button for testing.

Plan a one-page portfolio or personal site: interview, locked build brief, then step-by-step Claude Code prompts to build, polish, push to GitHub and deploy to Netlify, plus a live audit.

Create, audit, and improve websites and marketing landing pages by removing formulaic copy, weak evidence, content overload, and decorative filler. Use for page strategy, copywriting, visual design, responsive layouts, motion, and conversion reviews.