Art & Design

Conçoit, construit, refond ou relit des landing pages, sites, interfaces d'app, dashboards, docs et portfolios qui ont l'air conçus et non générés : une idée tirée du sujet, des références réelles, un tirage contre la convergence, un plancher d'accessibilité, d'honnêteté et de performance, et aucun tic visuel d'IA. Utiliser ce skill dès qu'une tâche change l'apparence, la mise en page, la typographie, la couleur, le mouvement ou le ressenti d'une interface web, même si l'utilisateur ne dit pas « design » : créer ou refaire une page, rendre un écran moins générique, « plus pro », « premium », « moins IA », relire un design, choisir une police ou une palette, ajouter des animations, faire une vidéo produit en code. Also use for English requests such as build a landing page, redesign this screen, make it look less AI-generated, or review this UI.

Elite Desktop UI/UX Design System & Product Design skill. Synthesized from 170+ high-converting B2B SaaS platforms, analytics dashboards, and agency references. Guides any AI to architect modern Bento grids, dense enterprise data tables, NeoSoftUI dark mode systems, high-converting SaaS landing pages, keyboard shortcut navigation, and production-ready desktop Tailwind CSS code.

Use when building or fixing a scroll-driven motion-graphics section on a web page, such as a canvas film scrubbed by scroll position, a pinned sticky "scrollytelling" stage, scroll-linked chapters with captions, or a 3D story drum or carousel rolled by scroll, drag and arrow keys. Also use when an existing scroll animation janks, hijacks the wheel, draws under its text, only plays forwards, burns CPU while idle, or ignores prefers-reduced-motion. Not for simple fade-in-on-scroll reveals, autoplaying video, or WebGL scenes.

Build realistic, client-ready mockups of LINE (OA chat, Flex messages, rich menus, push notifications), Facebook (feed, carousel, Stories/Reels ads) and TikTok (For You in-feed, Spark Ads) on iOS, Android and desktop, for any brand, exported as high-res transparent PNGs plus an overview board. Use this whenever someone wants to show how a campaign, CRM journey, ad, chatbot or LINE OA flow will look on a phone or desktop. That includes "mock up this LINE message", "show the FB ad on iPhone", "make a TikTok ad preview", "visualise the CRM journey", "rich menu per segment", "pitch visuals for social", or a sketch/brief of social screens, even if they never say the word "mockup".

把生活类/内容类博主（小红书、抖音、B站等）的账号数据做成一份面试用的单文件 HTML 作品集——浅色纸感、拍立得作品墙、季度曲线、成绩单 + 粉丝画像 + 总结。当用户说"给我做一个作品集/个人主页/简历网站""把账号做成面试材料""类似 whometopia 那样的页面""帮别的博主也做一份"时使用。内置小红书 CLI（免安装）、数据采集、模板、构建脚本和交付前体检，整个目录可直接分享给他人。

Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects.

Build, redesign, or audit any website or web UI: landing pages, portfolios, shops, editorial and corporate sites, documentation, dashboards, tools, HTML/CSS/JS, Tailwind or React. Use this skill whenever the user asks for a page, site, UI, layout, hero, redesign, "make it look better/more premium", or a design review, even if they never say "design". Produces a subject-specific design system (concrete visual idea, computed contrast, two-family typography, real content) with at most one signature motion. Avoids template defaults, gradient heroes, generic palettes, card-grid filler, placeholder copy, and hidden or clipped headlines.

Design a web or app screen as a working HTML and CSS mockup, or a logo, icon or illustration as an SVG, and the page draws it in a sandboxed preview panel (phone, tablet and desktop widths, or light, dark and chequered backgrounds). Use when the user asks for a mockup, wireframe, prototype, landing page, screen layout, logo, icon or SVG.

Use when designing a website, poster, landing page, or HTML prototype. Choose a fitting composition, typography, color roles, and interactions, then render and inspect the result.

Usa la API v1 de Bentho para preguntar a los documentos de un espacio (con fuentes y confianza), subir o quitar documentos, ajustar la configuración, consultar créditos y usar los módulos del espacio — Agente ventas (atender y vender por chat), Productos (catálogo, precios, stock), Comercial (tarifas de envío), Facturación (órdenes y comprobantes), Contabilidad, Kommo, Marca, Transcripción, Fuentes (fichas con datos de la web) y Landings. Úsala cuando la tarea mencione Bentho, una clave bth_, bentho.ai/api o un «espacio» de Bentho.

Use when building, redesigning, or polishing any user interface (a component, landing page, dashboard, app screen, mobile UI, onboarding or auth flow), especially from a short or vague prompt. Gives you a complete visual language, design tokens, component recipes, and a motion and micro-interaction system so the result looks and feels premium. The style is inspired by product designer @marcelkargul.

Write high-converting Google Ads Responsive Search Ad (RSA) copy — from raw inputs to a full set of headlines and descriptions, ready to paste into Google Ads. Use this skill whenever the user wants to write, review, improve, or generate Google Ads copy. Trigger on: "write Google Ads", "RSA copy", "ad headlines", "ad descriptions", "Google Ads RSA", "write search ads", "ad copy for Google", "help me with my Google Ads", or any request to create or improve copy for search advertising — even if they just say "write ads for my product" without mentioning Google specifically. The skill covers the full journey: reading a landing page, building a messaging framework, writing all 15 headlines + 4 descriptions per ad group with thematic tags, flagging Ad Strength issues and pinning candidates, and saving a structured output file. Don't wait for the user to ask for all of this explicitly — bring the full framework even if they just hand you a URL or a quick product description.

Adds the "page rebuilds itself" effect to an existing website (plain HTML, React or Next.js) - a swarm of colourful agent cursors hides the finished page, then rebuilds it layer by layer (selection frames with size labels, typing, image reveals, clone-and-rewrite of repeated items, rulers and guides), following the visitor's scrolling, with natural motion (swarms around a focus element, a spring-like finale, gravity-bent paths, mouse curiosity). Visitors see no controls; any click or key (except scroll keys) shows the finished page at once; reduced motion means no effect. No sound. A separate debug add-on (control bar, auto-scrolling tour, test hooks) exists for testing and recordings. Use when the user asks for a cursor swarm / agents rebuilding the page, a "Figma multiplayer building the site" intro, a "page builds itself" or "rebuild animation" effect, or mentions page-swarm-rebuild.

Design or redesign a conversion-focused SaaS landing page in an editable Figma file using supplied copy, product screens, brand guidelines, and a connected Figma MCP.

Complete organic growth system for any website. Technical SEO (prerendering SPAs, canonicals, sitemap, robots.txt, redirects, real 404s, JSON-LD), market research by country (Google Trends, willingness to pay), keyword research (autocomplete, Ahrefs/Semrush volumes), Search Console diagnostics, a sources policy, programmatic SEO 2.0 with a duplicate-content quality gate, tool-led SEO (free calculators and generators as ranking pages), money pages (competitor alternatives, X vs Y, landing pages), linkable download assets, GEO for AI search (ChatGPT, Perplexity, AI Overviews), thin-content consolidation with 301s, and conversion tracking per page group. Use when the user says "do SEO for this site", "grow organic traffic", "why isn't Google indexing my pages", "programmatic SEO", "pSEO", "tool SEO", "free tools for SEO", "competitor alternative page", "keyword research", "set up Search Console", "audit my SEO", "get cited by ChatGPT", "plan blog content", or "/organic-growth".

Build, grow and check a fast lead-generation website and lead magnets for any business, run by Claude Code for a non-technical owner. Landing pages with one conversion goal each, grouped into footer-linked archives that fit the business, with success-page contracts for every action (booked call, form, download, copy-paste, registration, purchase). Makes lead magnets that bring buyers. It suggests ideas tied to the offer, builds the PDF, phone version and cover images, and writes the posts, comment-to-DM flow, ads and emails. Real keyword research, plain persuasive copy with no AI tells, full SEO and GEO/AEO, indexing and speed checks. Guided interview with free Cloudflare hosting, or Freeform on any stack and host. Includes the Lead Desk, a free CRM on the business's Cloudflare account with admin logins, lead sources, results and alerts. Use for a website, landing page, lead magnet or freebie, lead tracking or CRM, keywords, SEO or AI visibility, indexing, or a site check.

Diseña y maqueta la SECUENCIA DE EMAILS HTML que se dispara cuando un lead rellena el formulario de una landing (se envía desde n8n o desde una plataforma de email marketing como ActiveCampaign, Brevo o Mailchimp). Le pasas en un mismo mensaje el brief del negocio y la landing (URL o HTML); la skill lee la oferta, el formulario y la identidad visual, comprueba la casilla legal de comunicaciones (RGPD y LSSI), investiga al público, propone la secuencia completa (email de recepción inmediato + emails de valor + invitación + cierre, con días de envío según el tipo de oferta) y, tras tu OK, redacta y monta cada email con diseño tipo carta de marca, copy claro y directo (sin adivinanzas) con los fundamentos de Ogilvy y de Email Persuasion de Ian Brodie, variables del formulario, versión en texto plano, modo oscuro y control de calidad. Valor antes que venta; no inventa datos. Úsala siempre que alguien pida emails de seguimiento, nurturing, secuencia de bienvenida, autorespuesta o emails post-formulario para sus le

Use when starting, designing, building, animating, auditing or reviewing a premium marketing website for a small or medium business (restaurant, café, hotel, salon, gym, portfolio, agency, local business). Owns design direction, the cross-site novelty ledger, motion and 3D policy, content-config architecture and the visual QA gate, and routes to companion skills (frontend-design, ui-ux-pro-max, cinematic-scroll, scroll-audit, gsap-*) when they are installed. Not for backend or non-visual tasks.

Design craft for any UI project. Audits running products and builds new interfaces from scratch so they read as designed, not AI-generated. Finds a direction from the product itself, sets the system (spacing, type, color, radius, depth, motion), fixes screens pass by pass, stress-tests them with worst-case data and reviews motion. Use when the user asks to audit, review, critique, polish, redesign or unslop a screen, to \"make it look designed\" or \"less AI\", to design or build a landing page, dashboard, app screen, form, component, deck or design system from scratch, to pick fonts, colors or animation, or when a UI shows AI tells like purple gradients, glows, gradient text, emoji icons, \"New ✨\" badges, uppercase tracked labels, colored side stripes on cards, everything centered or uneven spacing. Also in Portuguese (\"analisa essa tela\", \"melhora o design\", \"deixa com cara de produto\", \"cria uma landing\"). Works with any stack (HTML/CSS, React, Tailwind, Vue, Svelte, React Native).

Build web pages in the style of Apple's product marketing sites (apple.com product pages) — exact type scale, tracking, colors, easing, spacing, sticky translucent nav, scroll reveals, tile galleries, stat blocks — using a ready CSS/JS library. Use when the user asks for an Apple-like / apple.com-style site, a premium product landing page, a "no AI slop" marketing page, or references apple.com design, fonts or animation.

UI theme kit (color tokens, fonts, shared CSS classes, layouts, accent colors, light and dark) with a sample page per topic - reports and analytics, tasks, sales admin, news and reading, landing page, sign in and sign up - plus a palette board to pick and tweak colors. Use when drawing a mockup, building an HTML page, Artifact or .dc.html canvas, or React/Tailwind UI; when the user sends a screenshot, product name or URL to copy its look; or says "use theme ...", "accent color ...", "dark mode", "add a new theme". Vietnamese triggers - "giao diện", "theme", "mockup", "màu nhấn", "nền tối", "dùng theme ...", "thêm theme mới", "bảng phối màu".

Guided setup for a character-driven narrative portfolio from the lil_guy_portfolio template. Use when someone wants to make their own living-stage site, personalise this template, or asks to "set up my portfolio". Copies the template first (no code generation), then interviews them one question at a time (intent, story, copy style, structure, lines, character, palette and type, links), then builds, checks and deploys.

ทำโปรไฟล์หน้าเดียว (one page) ว่าผู้ใช้เก่งอะไร นิสัยเป็นอย่างไร โตมาอย่างไร และไปต่อสายงานไหนได้ จากประวัติการใช้ Claude Code ในเครื่อง (และเครื่องอื่นผ่าน ssh) + แบบทดสอบ + สัมภาษณ์ · ใช้เมื่อผู้ใช้ขอ "ดูประวัติแล้วบอกว่าผมทำอาชีพอะไร เก่งแค่ไหน", "ทำ portfolio / โปรไฟล์ / one page ของผม", "ผมควรได้เงินเดือนเท่าไหร่", "ผมควรไปสายไหน", หรือพิมพ์ /portfolio-kup

Cinematic effects for websites. (1) Scroll zoom reveal - a full-screen scene (render, game shot, video) is pinned while you scroll, then the camera pulls back to show it running inside an app on a laptop/device screen; copy fades in below, followed by a tabbed crossfade gallery. (2) OLED pixel field - a cursor-reactive background of tiny RGB sub-pixels where moving the mouse leaves a glowing, flowing, color-shifting trail (click = ripple). Use when building a landing page, product page, portfolio or game/3D/hardware site and the user wants an Apple-style zoom-out reveal, a "scene shrinks into a laptop screen" effect, a pinned sticky scroll scene, a scroll-scrubbed hero, "that AAA games animation", a cursor/hover glow trail, an interactive pixel/LED/OLED grid background, or "the OLED hover effect". Vanilla JS + CSS + WebGL, no dependencies, works in plain HTML, React, Next.js, Vue, Astro.