首页 / AI 规则构建器

工作室工具

组合 AI 编码规则
匹配你的技术栈

REACTAPP.TOP 原创指南，面向 React、TypeScript、Express 与运营域系统中的助手，并附 UI 布局提示词库。选择、预览 Markdown、导出到编辑器。

规则构建器

快速开始

上传 package.json / requirements.txt根据依赖启发式自动选择

已选规则 (0)

在左侧选择规则以生成 Markdown 包。

预览与导出

环境路径: .cursor/rules/

# AI rules for project

Generated by REACTAPP.TOP AI Rules Builder. Original studio guidance for assistants working in this repository.

_No rules selected yet._

UI 提示词库

面向 vibe coding 的布局提示词

选择结构，复制提示词，连同目标风格的截图一起粘贴到 Cursor、v0、Lovable 或 Bolt。把提示词加入包中，即可与编码规则一起导出。

15 个分类，共 92 条布局提示词

登录表单6

分屏配视觉

一侧是表单，另一侧是产品视觉或品牌面板

Build a sign-in screen as a split layout: a form column with logo, heading, email, password with show/hide toggle, remember-me checkbox, forgot-password link, primary CTA and a sign-up link; and a visual column with a product screenshot or brand graphic plus a one-line customer quote. Collapse the visual column below 768 px and keep inline validation messages under each field. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

背景上的居中卡片

悬浮卡片，含标题、字段、CTA 和注册链接

Build a sign-in form as a floating card centred on a full-page background with a soft gradient or subtle pattern. Inside the card: heading, email, password, primary CTA and a link to switch to sign-up. Show field-level validation inline and a disabled pending state on the button while submitting. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

极简单栏

无卡片——Logo、标题、字段和 CTA 整齐纵向排列

Build a sign-in page as a single narrow column (max 360 px) without a card container: logo, heading, email, password, primary CTA and a secondary link, stacked with generous vertical rhythm. Put legal links in a quiet footer and keep the whole form visible without scrolling on a phone. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

社交登录优先

社交登录按钮置顶，邮箱和密码位于分隔线下方

Build a sign-in form where social providers (Google, GitHub, Apple) are the primary group of full-width buttons at the top, followed by an "or continue with email" divider and a secondary email/password form below. Each social button has the provider icon, consistent height and a visible focus ring. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

仅魔法链接

一个邮箱输入框和一个 CTA——无密码登录流程

Build a passwordless sign-in: a heading, a single email input and one CTA that sends a magic link. After submit, replace the form with a "check your inbox" state showing the masked email, a resend button with a 30-second countdown and a link to use a different address. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

多步向导

顶部进度指示，注册拆分为 2–3 步

Build a sign-up wizard with a step indicator at the top and three steps: account (email, password), profile (name, role) and workspace (name, team size). Provide back and next buttons, keep entered values when navigating between steps, and show a summary before the final submit. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

定价8

经典三档卡片

三张卡片并排，中间一张标为推荐

Build a pricing section with three tier cards side by side; the middle card is elevated, uses the accent border and carries a "Recommended" badge. Each card shows the plan name, price with billing period, a short positioning line, a feature list with check icons and a CTA. Stack the cards on mobile with the recommended one first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

月付 / 年付切换

带「省 X%」徽标的计费切换，价格实时更新

Build a pricing section with a monthly/annual switch above the plan cards and a "save 20%" badge next to the annual option. Prices update instantly when the switch changes, with a short crossfade; expose the switch with role="switch" and keyboard support. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

对比表格

方案为列，功能为行，用勾和横线标注

Build a feature comparison table: plans as columns with a sticky header row containing name, price and CTA; features grouped into sections as rows with check icons, dashes or short values. On screens under 768 px collapse it into one accordion per plan instead of horizontal scrolling. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

单档 Hero

一张居中大卡片，含价格、完整功能列表和 CTA

Build a single-plan pricing hero: one large centred card with the price and period, a two-column list of everything included, a prominent CTA and a money-back or cancel-anytime note underneath. Keep it readable at a glance; no toggles or comparisons. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

用量滑块

交互式滑块，实时更新显示价格

Build a usage-based pricing block: a range slider for seats or monthly requests that updates the displayed price live, shows the unit price and highlights tier breakpoints along the track. The slider is keyboard operable with visible value labels; show a "contact sales" state past the last tier. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

积分包网格

磁贴显示积分数量、价格、单价和徽标

Build a credit pack picker as a grid of selectable tiles; each tile shows the credit amount, price, cost per credit and an optional "Best value" or "Popular" badge. Selecting a tile updates a summary and CTA below; support keyboard selection with radio semantics. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Free 与 Pro 对比

两栏布局，两个方案之间视觉对比强烈

Build a two-plan pricing layout: Free on the left with a muted surface and Pro on the right on an accent or dark surface, features aligned row by row so the difference is obvious. Each column has its own CTA; on mobile stack Pro first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

移动优先的堆叠卡片

全宽卡片，每档一张，各含完整功能列表

Build a mobile-first pricing list: full-width stacked cards, one per tier, each with name, price, complete feature list and a CTA at the bottom. Add a sticky "compare plans" button that scrolls to a compact comparison table; on desktop limit the cards to a 640 px column. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

功能与 Bento8

三栏图标网格

三栏排列的图标、功能标题和简短描述

Build a features section as a three-column grid of six items; each has an icon in a soft tinted square, a title and one or two sentences. Equalise card heights, collapse to two columns at 768 px and one at 480 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Bento 网格

大小不一的非对称磁贴，核心功能更大

Build a bento-style features grid: two large tiles for the headline capabilities and four small tiles for supporting ones, all with the same corner radius and gap. Each tile has a visual (screenshot crop, chart or icon) and a short caption; reflow to a single column on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

交错行

一侧文字、一侧视觉，逐行交替

Build a features section as alternating rows: text block (eyebrow, heading, paragraph, link) on one side and a visual on the other, switching sides each row. Stack text above visual on mobile and keep the visuals the same aspect ratio. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

标签页功能

每个标签页展示一个功能及其视觉

Build a tabbed features block: a horizontal tab list on top (vertical on the left at desktop widths if there are more than four), and a panel showing the visual and description of the active feature. Tabs follow the WAI-ARIA tabs pattern with arrow-key navigation; no auto-rotation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

手风琴列表

可折叠的行，展开后显示完整描述

Build a features accordion: vertical list of collapsible rows with the feature name, an expanded description and an optional visual on the side that changes with the open row. Only one row is open at a time; keep collapsed content in the DOM and hide it with CSS. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

滚动触发展示

一侧视觉固定，另一侧描述随滚动切换

Build a scroll-driven features section: a sticky visual on one side and a column of feature descriptions on the other; as each description reaches the middle of the viewport the visual updates to match. Use IntersectionObserver, and fall back to a plain stacked list when prefers-reduced-motion is set or on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

图标墙

密集的小图标磁贴网格，配简短标签

Build an icon wall: a dense grid of 16 to 24 small tiles, each with an icon and a two-word label (integrations, formats or capabilities). Tiles lift slightly on hover, wrap from six columns down to three, and keep labels visible without truncation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

前后对比

两栏展示使用产品前后的差别

Build a before/after comparison: two side-by-side columns, "Without" with muted styling and cross icons and "With" with the accent surface and check icons, item by item. Communicate the contrast with icons and labels, not colour alone; stack the columns on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Hero 区块8

居中文字 + 截图

标题、副标题和 CTA 在上，大幅产品截图在下

Build a hero with centred eyebrow, heading, subheading and two CTAs, followed by a large product screenshot in a browser frame with a soft shadow that slightly overlaps the next section. Preload the screenshot, set explicit dimensions and use fluid type for the heading. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

分栏 Hero

一侧是标题和 CTA，另一侧是产品样机

Build a split hero: heading, subheading and two CTAs on the left, a product mockup (device frame or floating cards) on the right. Below 768 px stack the text above the visual and reduce the visual height. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

视频背景

标题和 CTA 背后循环播放的静音视频

Build a hero with a looping, muted, autoplaying background video under a dark overlay, with heading and CTAs on top. Provide a poster image, load the video lazily and show the static poster when prefers-reduced-motion is set or on slow connections. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

动态渐变网格

文字下方缓慢流动的渐变背景

Build a hero with a slowly animating gradient mesh background (three or four blurred colour blobs) and heading, subheading and CTAs on top. Animate only transform and opacity, pause the animation when prefers-reduced-motion is set, and keep text contrast at WCAG AA over every frame. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

终端 / 代码 Hero

以带打字动画的终端窗口为核心视觉

Build a developer-focused hero: heading and one-line pitch above a terminal window that types an install command and prints its output, with a copy button for the command. Use a monospace font, realistic prompt and colours, and render the final text immediately when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

悬浮 UI 元素

产品卡片环绕中央标题漂浮

Build a hero where four to six small product UI cards (notifications, charts, list items) float around a centred heading and CTA with slight parallax on pointer movement. Hide all but two cards under 768 px, and disable the parallax when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

大号粗体排版

超大标题为视觉焦点，辅助元素极少

Build a typography-led hero: an oversized, tightly set heading occupying most of the viewport, a single short sentence and one CTA. Use clamp() for fluid type between 40 and 120 px, balanced line wrapping and no imagery. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

内嵌表单的 Hero

标题正下方的邮箱收集表单

Build a hero with heading, subheading and an inline email capture form directly beneath: input and button on one row, a privacy note under it. Validate the email inline, show a success state replacing the form and stack input and button on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

CTA 横幅7

全幅渐变横幅

全宽渐变区块，标题居中并配 CTA

Build a full-bleed call-to-action section with a gradient background, centred heading, one supporting sentence and a single high-contrast CTA. Keep vertical padding generous and the text readable at AA contrast over the gradient. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

分栏 CTA 卡片

卡片左侧为标题，右侧为按钮

Build a contained call-to-action card: heading and one sentence on the left, primary button on the right, aligned on one row with a border and subtle surface. Stack the content and make the button full width under 640 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

底部固定栏

固定在视口底部，含信息、CTA 和关闭按钮

Build a sticky bottom bar fixed to the viewport: short message, one CTA and a dismiss button; remember the dismissal in localStorage. Respect the safe-area inset on mobile, do not cover page content by adding bottom padding to the body while visible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

图案背景

居中信息和按钮背后的淡点阵或网格图案

Build a call-to-action section with a subtle dot or grid pattern background, a centred heading, one sentence and a button. Fade the pattern towards the edges with a radial mask and keep it purely decorative for assistive technology. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

双 CTA

主操作与次操作并排

Build a call-to-action block with a heading, one sentence and two buttons side by side: a filled primary action and an outlined secondary one, each with a short helper text underneath. Stack the buttons full width on narrow screens with the primary first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

内联邮箱收集

标题下方同一行的邮箱输入框和提交按钮

Build an email capture call to action: heading, subheading and an inline form with email input and submit button on one row, plus a note about frequency and unsubscribe. Show inline validation and a success message in place of the form. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

评价 + CTA 组合

标题和按钮上方的客户引言，作为社会认同

Build a call-to-action block that opens with a short customer quote, avatar, name and company, followed by the heading and a single CTA. Keep the quote to two lines and align everything centrally. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

数据栏7

横向四列数字

一行四个大数字，下方配说明

Build a stats bar with four large numbers in a row and a short label under each, separated by thin vertical dividers. Use tabular figures, wrap to two columns on tablets and one on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

动画递增计数

数字进入视口时递增到目标值

Build a stats row whose numbers animate from zero to their final value when scrolled into view, once, over about a second with easing. Render the final values in the server HTML and skip the animation when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

图标 + 数据

每个数字和说明都配一个图标

Build a stats block where each metric is a pair of a rounded icon tile on the left and the number with its label on the right, three or four pairs in a row. Icons are decorative; the label carries the meaning. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Logo 栏 + 数据

客户 Logo 与「10k+ 用户」等关键数字并列

Build a social-proof strip combining a row of monochrome customer logos with two or three key figures such as users, uptime and countries. Give logos equal optical size, and place the figures above the logos on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

纵向堆叠数据

适合窄栏或侧边栏的指标堆叠

Build a vertical stats stack for a narrow column or sidebar: each metric shows a number, a label and an optional delta, separated by hairlines. Keep numbers right-aligned with tabular figures. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

全幅图片上的数据

叠加在全宽图片或渐变上的数字

Build a full-bleed section with a background image or gradient and a dark overlay, with three or four stats laid over it in white. Ensure AA contrast for numbers and labels and load the image with explicit dimensions. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

卡片式数据

一排带边框卡片，每张一个指标

Build a stats row as individual bordered cards, each with a label, a large number and a small trend indicator (arrow and percentage) with an accessible text equivalent. Cards wrap to a 2×2 grid on tablets. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

导航8

Logo + 链接 + CTA

Logo 居左，链接居中或居右，CTA 在最右侧

Build a top navigation bar: logo on the left, four or five text links in the centre or right, and a primary CTA button on the far right. Under 768 px collapse the links into a menu button that opens an accessible drawer with focus trapping and Escape to close. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

居中 Logo 分列导航

Logo 居中，链接均分在两侧

Build a navigation bar with the logo centred and links split evenly on both sides, all vertically aligned on one row. On mobile show the logo on the left and a menu button on the right. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

超级菜单

全宽下拉面板，子链接按分类排列

Build a navigation bar with a full-width mega menu: hovering or clicking a top-level item opens a panel with three or four columns of categorised links, each with an icon and a one-line description, plus a featured card on the right. Open on click and Enter, close on Escape and outside click, and render the panel as an accordion inside the mobile drawer. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

侧边栏导航

纵向侧边栏，含 Logo、堆叠链接和用户区块

Build a vertical sidebar navigation: logo at the top, grouped links with icons and an active state in the middle, and a user block with avatar, name and menu at the bottom. Collapse to an icon-only rail on tablets and to a slide-in drawer on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

悬浮胶囊导航

与顶部分离的圆角胶囊栏，带阴影

Build a floating pill navigation: a rounded bar detached from the top edge, centred, with logo, links and a small CTA, a soft shadow and a translucent blurred background. Shrink it slightly on scroll and fall back to a full-width bar under 640 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Hero 上透明

位于 Hero 上方时透明，滚动后变为实色

Build a navigation bar that is transparent with light text while over the hero and becomes a solid surface with a bottom border and dark text after scrolling 40 px. Animate only background and colour, and keep a visible focus style in both states. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

命令面板导航

醒目的 ⌘K 搜索框作为核心元素

Build a navigation bar centred on a command palette trigger: a wide search-like button showing "Search or jump to…" and the ⌘K shortcut; it opens a modal with fuzzy results grouped by pages, actions and recent items. Support arrow keys, Enter and Escape, and trap focus inside the modal. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

移动端底部导航

App 风格的底部标签栏，带图标和标签

Build a mobile bottom tab bar with four or five items, each an icon with a label, a clear active state and an optional badge. Respect the safe-area inset, keep touch targets at least 44 px and hide it at desktop widths in favour of the top navigation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

客户评价8

三栏引言卡片

三张卡片，含照片、姓名、职位和引言

Build a testimonials section with three quote cards side by side; each has the quote, a photo, name, role and company, with the quote first for scannability. Collapse to one column on mobile and keep card heights aligned. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

跑马灯滚动

无限横向滚动的评价磁贴

Build a testimonials marquee: a row of compact quote tiles scrolling horizontally and looping seamlessly, pausing on hover and focus. Duplicate the list for the loop, animate with transform only, and show a static two-row grid when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

瀑布流网格

Pinterest 风格的不等高评价网格

Build a masonry grid of testimonial cards with varying quote lengths, three columns on desktop, two on tablet and one on phones. Use CSS columns or grid with dense packing so cards keep their natural height; include a "show more" button after the first twelve. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

单条精选评价

一条大引言，含照片、姓名、职位和公司 Logo

Build a single featured testimonial: a large quote in display type, a portrait photo, the name, role and company logo, arranged as a two-column layout with the photo on one side. Stack on mobile and keep the quote under 40 words. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

视频评价网格

可点击的视频缩略图，带播放图标、姓名和公司

Build a grid of video testimonials: thumbnails with a centred play button, duration badge, and the customer name and company underneath; clicking opens an accessible modal player. Use poster images with explicit dimensions and load the player only on click. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

推文墙

社交帖子风格卡片，含头像、账号和时间

Build a wall of social-post style testimonial cards: avatar, display name, handle, timestamp and post text, in a three-column grid. Link each card to the original post, keep the platform logo small and stack to one column on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Logo 云

带标题的客户与合作伙伴 Logo 网格或横排

Build a logo cloud: a short heading such as "Trusted by teams at" and a grid of eight to twelve monochrome customer logos with equal optical weight. Give each logo an accessible name, and wrap to three columns on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

带圆点的轮播

每次展示一条评价，配圆点或箭头

Build a single-testimonial carousel showing one quote with photo, name and role at a time, with previous/next arrows and dot indicators. Support keyboard arrows and touch swipe, announce slide changes politely, and do not autoplay. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

页脚5

多栏站点地图

分组链接、Logo、标语、社交图标和版权

Build a site footer with the logo and a one-line tagline on the left, three or four columns of grouped links (Product, Company, Resources, Legal) and a bottom row with copyright, language selector and social icons. Collapse the columns into accordions on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

极简单行

Logo、少量链接和版权信息排在一行

Build a minimal footer: logo on the left, three or four key links in the centre and the copyright on the right, all in a single row with a top border. Wrap to two rows on mobile and keep the tap targets at least 44 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

巨型 Logo 页脚

巨大的文字标识居中，链接环绕四周

Build a footer with the brand wordmark set in huge type across the full width as the centrepiece, with link groups above it and a thin row of legal links and copyright below. Clip the wordmark so it never causes horizontal scrolling. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

订阅优先页脚

邮件订阅为主元素，导航链接次之

Build a footer where the newsletter signup is the dominant element: heading, one sentence, an inline email form and a consent note, with the navigation links in smaller type below. Show inline validation and a success state, and put the copyright on the last row. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

带状态指示的页脚

实时系统状态指示与常规链接和 Logo 并列

Build a footer with the usual logo and link columns plus a live system status pill ("All systems operational") with a coloured dot that links to the status page. Fetch the status client-side after hydration and fall back to a neutral state on error. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

常见问题5

单栏手风琴

单栏；每个问题展开显示答案

Build an FAQ as a single-column accordion: each question is a button with a chevron, and the answer expands beneath it. Use aria-expanded and aria-controls, keep the answers in the DOM and hide them with CSS so search engines can read them, and allow several items to be open at once. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

双栏手风琴

问题分布在两栏手风琴中

Build an FAQ with questions split evenly across two accordion columns to save vertical space, collapsing to one column under 768 px. Order the questions by importance top to bottom, left to right, and keep answers in the DOM. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

聊天气泡问答

问题与答案以交替的聊天气泡呈现

Build an FAQ styled as a conversation: questions as right-aligned bubbles from a user avatar and answers as left-aligned bubbles from the brand avatar, alternating down the page. Keep it a plain list semantically (a definition list or headings and paragraphs), not a live chat widget. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

可搜索的 FAQ

顶部搜索框，输入时实时过滤问题列表

Build an FAQ with a search input at the top that filters the list of questions as the user types, highlighting matched words and showing an empty state with a contact link when nothing matches. Filter client-side, keep the full list in the server HTML and announce the result count to screen readers. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

分类标签页

分类标签页切换不同的问题集合

Build an FAQ with category tabs at the top (Billing, Security, Getting started, Integrations) that switch between filtered sets of questions, each set an accordion. Follow the tabs ARIA pattern, sync the active tab with a URL hash and render all sets in the HTML. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

仪表盘6

侧边栏 + 主内容

纵向导航侧边栏加主内容区域

Build an application shell with a collapsible left sidebar (logo, grouped navigation, user block) and a main area with a top bar containing breadcrumbs, search and account menu, then the page content. Persist the collapsed state and turn the sidebar into a drawer under 1024 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

顶部导航 + 内容

顶部横向导航，下方全宽内容

Build an application shell with a horizontal top navigation (logo, primary sections, search, notifications, avatar) and full-width content beneath with no sidebar. Show the active section with an underline and collapse the sections into a menu on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

三栏布局

侧边栏、列表或信息流栏和详情面板

Build a three-pane layout: a narrow navigation sidebar, a middle pane with a scrollable list or feed and a right detail panel that shows the selected item. Make the middle/detail split resizable, and on tablets and phones show one pane at a time with a back button. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

看板

按阶段分列，卡片可拖拽

Build a kanban board with columns for each stage, a WIP count in every column header and cards that can be dragged between columns with a drop indicator. Provide a keyboard alternative for moving cards (menu or shortcuts), announce moves to screen readers and scroll columns horizontally on small screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

指标卡片 + 图表

顶部 KPI 卡片，下方大图表

Build a dashboard overview: a row of four KPI cards (label, value, delta versus the previous period, sparkline) above a large time-series chart with a date-range picker and series toggles. Design loading, empty and error states for every card and chart, and show units and time zone. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

空状态

居中插图、标题和行动号召

Build an empty state for a dashboard page: a centred illustration or icon, a short heading, one sentence explaining what will appear here and a primary CTA to create the first item, plus a secondary link to documentation. Keep the layout inside the normal content area so navigation stays visible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

新手引导4

清单式引导

带进度和可展开步骤的设置任务

Build an onboarding checklist card: a progress bar with "2 of 5 completed", a list of setup tasks each with a checkbox state, a short description and an expandable panel with the action button. Persist completion, let users dismiss the card when done and keep it keyboard accessible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

导览提示

指向界面元素的引导式提示气泡

Build a guided product tour: a sequence of tooltip callouts anchored to real UI elements, each with a title, one sentence, step counter, next/back buttons and a skip link, with a dimmed backdrop around the highlighted element. Manage focus inside the tooltip, close on Escape and remember completion. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

视频演示弹窗

内嵌演示视频的弹窗，配「开始使用」CTA

Build a welcome modal that appears on first login with a short heading, an embedded walkthrough video with a poster, and a "Get started" CTA plus a "Skip for now" link. Load the video only when the modal opens, trap focus, close on Escape and never show it again after dismissal. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

插图空状态

定制插图、标题、一句说明和 CTA

Build an illustrated empty state for a first-run screen: a custom illustration, a short heading, one supporting sentence and a primary CTA, optionally with a secondary "import" action. Size the illustration with explicit dimensions and hide it from screen readers. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

博客与内容4

杂志式网格

顶部大幅精选文章，下方小卡片网格

Build a blog index in magazine style: one large featured post with cover image, category, title, excerpt and author on top, then a three-column grid of smaller post cards. Use consistent image aspect ratios, and collapse the grid to one column on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

单栏阅读视图

简洁单栏，行宽和行高舒适

Build an article page as a single reading column of 65 to 75 characters with generous line height, a title block (category, title, author, date, reading time), a lead image and styled typography for headings, lists, quotes, code and figures. Add share links and a "next article" card at the end. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

侧边栏目录

固定目录，高亮当前章节

Build a long-form documentation or article layout with the content in the centre and a sticky table of contents in the right sidebar that highlights the current section while scrolling. Generate the TOC from h2/h3 headings, use IntersectionObserver and collapse the TOC into a details element above the content on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

带筛选的卡片网格

文章卡片网格，上方为分类筛选标签

Build a blog index with a row of category filter chips (All plus categories) above a three-column grid of post cards with image, category, title, excerpt and date. Sync the active filter with the URL query, show a result count and an empty state, and render the full list in the server HTML. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

联系3

表单 + 联系信息

一侧是联系表单，另一侧是公司信息

Build a contact page as two columns: a form with name, email, company, message and consent checkbox on one side, and contact details (email, phone, address, office hours) with a small map or office photo on the other. Validate inline, show a success state and stack the columns on mobile with the form first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

支持渠道卡片

在线聊天、邮件、文档和社区的卡片

Build a support page as a grid of channel cards: live chat, email, documentation and community, each with an icon, title, one sentence, expected response time and a CTA. Show availability (online, business hours) where relevant and stack to one column on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

整页极简表单

居中表单，含标题、少量字段和一个按钮

Build a minimal full-page contact form: a centred column with a heading, one sentence, name, email and message fields and one submit button, with a note on response time. Keep the fields large, validate inline and show a clear success state. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

通用页面5

对比表（我们 vs 竞品）

你的产品与竞品对比，用勾和横线标注

Build a competitor comparison table: your product as the highlighted first column, two or three competitors as further columns, and feature rows with checks, dashes or short notes. Add a sticky header, footnotes for claims and switch to per-product cards under 768 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

功能公告横幅

顶部细条，含「新」标签、信息、链接和关闭

Build a slim announcement bar above the navigation: a "New" tag, a one-line message, a "Learn more" link and a dismiss button, with the dismissal persisted per announcement id. Do not shift layout on load — reserve its height server-side — and keep AA contrast on the accent background. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Cookie 横幅

底角卡片，含接受、拒绝和设置

Build a cookie consent card anchored to the bottom corner: a short message with a privacy link and three actions — accept all, reject non-essential and settings, where settings opens a modal with per-category toggles. Do not block the page, keep equal visual weight for accept and reject, and store the choice with a version. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

404 页面

「页面未找到」提示，附说明和有用链接

Build a 404 page: a large "404", a friendly heading, one sentence, a search box or list of popular links, and CTAs back to home and support. Keep the site header and footer, return a real 404 status and emit noindex. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

加载状态

与最终内容结构一致的骨架屏，带闪光动画

Build a loading state as a skeleton that mirrors the final layout (header, cards, table rows) with a subtle shimmer animation and no layout shift when the real content arrives. Use aria-busy on the region, disable the shimmer when prefers-reduced-motion is set and show an error state after a timeout. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

使用方法

选择需要的结构并复制提示词。
连同截图或设计令牌一起粘贴到 AI 工具中，让结果贴合你的视觉风格。
把提示词加入包，即可作为 .mdc 文件与编码规则一起交付。

常见问题

关于 AI Rules Builder

免费的浏览器工具：为 Cursor、GitHub Copilot、Claude Code 和 Windsurf 组合原创编码规则，并提供 UI 布局提示库。可预览 markdown、复制或下载文件——不会上传到我们的服务器。

Cursor（.mdc / rules）、GitHub Copilot 说明、Claude Code 与 Windsurf。选择导出环境后，构建器会按该工具格式化所选规则。

免费。规则选择与预览在浏览器内完成。我们不会在服务器上保存你的规则包——请复制或本地下载文件。

UI 提示是常见布局的现成 vibe-coding 简报。可与工程规则放进同一规则包，一并导出为 markdown 或 Cursor 文件。

可以。复制预览、下载 markdown，或导出 Cursor 规则文件。若要在产品中落地 AI 功能，请参阅我们的 AI 与 LLM 专长页。

24小时评估