Build a website prototype as a single HTML file using a supplied template and section layouts. Suitable for landing pages, pricing pages, and documentation indexes, with colors adapted to an existing design system.
中文简介正在准备中。当前显示英语简介。
- Prototyping a product landing page
- Creating a pricing comparison page
- Designing a documentation index
nexu-io/open-design☆ 10.3万2026年10月20日 更新
根据品牌的配色、字体和布局,制作产品发布前的预登记页面。将标志、产品介绍和邮箱登记表单整合到一个HTML文件中,并兼顾移动端显示与输入验证。
- 制作产品发布前的邮箱登记页面
- 招募测试版参与者
- 收集提前体验的意向
nexu-io/open-design☆ 10.3万2026年10月20日 更新
Create a single-page HTML poster with the feel of a newspaper essay. Oversized serif headlines, paper textures, six numbered sections, and annotated quotations organize substantial text into an editorial layout for opinions or launches.
中文简介正在准备中。当前显示英语简介。
- Presenting a launch announcement as an editorial poster
- Turning a manifesto into a single-page layout
- Designing a newspaper-style essay poster
nexu-io/open-design☆ 10.3万2026年10月20日 更新
使用信息流、个人资料、结算等六类布局,制作置于iPhone 15 Pro设备边框内的单屏HTML应用模型,便于查看内容安排与界面效果。
- 制作信息流或消息列表原型
- 研究个人资料和商品详情布局
- 展示结算页与欢迎页
nexu-io/open-design☆ 10.3万2026年10月20日 更新
Review web interface code against Vercel's Web Interface Guidelines, covering layout, typography, color, motion, and accessibility. Receive concise findings with file names and line numbers, using a bundled guideline snapshot for a consistent review baseline.
中文简介正在准备中。当前显示英语简介。
- Reviewing product interface code
- Checking accessibility against interface guidelines
- Checking layout, typography, color, and motion
nexu-io/open-design☆ 10.3万2026年10月20日 更新
Build polished web pages with explicit guidance for typography, spacing, colors, layered cards, and restrained animation. The skill provides layout options and mobile adaptation rules, producing React, Tailwind, or HTML code for a consistent visual direction.
中文简介正在准备中。当前显示英语简介。
- Creating a calm landing page with refined typography
- Designing an asymmetrical SaaS feature layout
- Building a portfolio with soft shadows and generous spacing
nexu-io/open-design☆ 10.3万2026年10月20日 更新
将HTML生成的PPTX与源文件对照,检查文字裁切、页脚重叠及斜体丢失等问题。整理原因,调整布局规则,再次导出并验证是否越界。
- 对比HTML与已导出的PPTX
- 修复文字裁切和页脚重叠
- 调查斜体丢失和字体变化
nexu-io/open-design☆ 10.3万2026年10月20日 更新
Generate a DESIGN.md file for Google Stitch that defines colors, typography, layouts, component states, and motion. Clear descriptions and exact values give the screen-generation agent a shared reference, including explicit rules against generic design patterns.
中文简介正在准备中。当前显示英语简介。
- Defining shared design rules for Google Stitch screens
- Documenting colors, typography, and component behavior
- Specifying mobile layouts and animation rules
nexu-io/open-design☆ 10.3万2026年10月20日 更新
Build React or Next.js interfaces with specific rules for typography, color, spacing, and animation. The skill guides responsive layouts, loading and error states, and performance-conscious interactions while preserving the original v1 design behavior.
中文简介正在准备中。当前显示英语简介。
- Building a marketing page with distinctive typography
- Refining dashboard layouts and interaction states
- Adjusting layout density and animation intensity
nexu-io/open-design☆ 10.3万2026年10月20日 更新
支持读取、新建和调整PowerPoint演示文稿,涵盖幻灯片内容、版式与模板,可用于管理层汇报、培训材料和产品评审资料。
nexu-io/open-design☆ 10.3万2026年10月20日 更新
Design desktop landing page prototypes with varied layouts, large typography, dense grids, and GSAP animations tied to scrolling. Pages follow an attention-to-action structure, with explicit checks for heading length, grid completeness, and button text contrast.
中文简介正在准备中。当前显示英语简介。
- Prototyping a landing page with scroll animations
- Exploring varied hero layouts and typography
- Designing a compact grid without empty cells
nexu-io/open-design☆ 10.3万2026年10月20日 更新
Read, create, and edit .docx documents while paying attention to formatting and layout fidelity. Use it for Word document tasks where both the written content and its presentation need attention.
中文简介正在准备中。当前显示英语简介。
- Reading the contents of an existing .docx document
- Creating a Word document with formatting and layout
- Editing a document while preserving its presentation
nexu-io/open-design☆ 10.3万2026年10月20日 更新
Build a three-slide finance or strategy presentation with bold metric cards and a precise grid layout. A black, warm-paper, and neon-lime palette frames the data in one HTML file with button, keyboard, and dot navigation.
中文简介正在准备中。当前显示英语简介。
- Presenting financial metrics across three slides
- Creating a strategy deck with prominent numbers
- Replacing text and values in a consistent slide layout
nexu-io/open-design☆ 10.3万2026年10月20日 更新
Evaluate improvements to Archify diagrams using actual outputs and agent work records. Compare accuracy, readability, and total delivery time to investigate layout, connection routing, diagnostics, and authoring guidance, then document what the evidence supports.
中文简介正在准备中。当前显示英语简介。
- Comparing diagram layouts and connection routes
- Investigating repeated diagram repair attempts
- Testing changes to authoring guidance
tt-a1i/archify☆ 8.6万2026年10月20日 更新
Build web pages and interface components with a clear visual direction and working code. Shape typography, colors, layouts, and animation around the intended audience and purpose, with support for HTML/CSS/JS, React, and Vue implementations.
中文简介正在准备中。当前显示英语简介。
- Build a landing page with a clear visual identity
- Refine a dashboard’s layout and typography
- Create React components with coordinated colors and motion
bytedance/deer-flow☆ 8.4万2026年10月20日 更新
Design and improve website and app interfaces, from typography, spacing, and color to task flows. Review usability, accessibility, responsive layouts, and performance, or refine interface text, error states, and reusable design elements.
中文简介正在准备中。当前显示英语简介。
- Planning the structure and appearance of a new interface
- Improving typography, spacing, and color in existing screens
- Reviewing accessibility and layouts across screen sizes
pbakaus/impeccable☆ 8.3万2026年10月20日 更新
Review stylesheets for a CSS reset or normalization layer that reduces differences in browser defaults. Check import order, framework provisions, and rendered layouts across screen sizes and interaction states, then suggest changes for a consistent styling foundation.
中文简介正在准备中。当前显示英语简介。
- Investigating layout differences between browsers
- Choosing a reset for a new site's styles
- Checking reset coverage in a CSS framework
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Review images displayed at different screen sizes and help browsers select appropriately sized files. Check srcset image options, sizes display-width hints, and CSS layout together to identify oversized mobile downloads or mismatched image variants.
中文简介正在准备中。当前显示英语简介。
- Reviewing responsive images in articles
- Reducing oversized image downloads on phones
- Checking image sizes in cards and galleries
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Review styles written directly in HTML or embedded style blocks, and move suitable rules into external stylesheets. Check layouts across screen sizes and interaction states while preserving justified exceptions for critical styles and dynamic values.
中文简介正在准备中。当前显示英语简介。
- Reviewing styles written directly in HTML
- Moving embedded styles into external stylesheets
- Checking exceptions for critical CSS and dynamic values
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Review and implement dark mode using CSS variables and the user's operating system preference. Check fixed colors, contrast, responsive layouts, and interaction states, with guidance for adding a manual theme switch that remembers the user's choice.
中文简介正在准备中。当前显示英语简介。
- Match site colors to the operating system's dark mode
- Find fixed colors that break the dark theme
- Add a manual theme switch that remembers the user's choice
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Review image dimensions to find risks of layout shift, where content moves as images load. Get file-level findings and before-and-after HTML using correct width, height, and responsive CSS, while accounting for small decorations with stable sizing.
中文简介正在准备中。当前显示英语简介。
- Investigating content jumps while images load
- Finding images missing width or height attributes
- Preserving image proportions in responsive layouts
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Review CSS loading that delays a page’s first visible content. Help inline essential styles and defer other stylesheets, using preload and media conditions, while checking rendered layouts at different screen widths and interaction states.
中文简介正在准备中。当前显示英语简介。
- Investigating CSS that delays initial page display
- Separating essential styles from styles loaded later
- Reviewing preload and media-based stylesheet loading
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Check whether production CSS is minified, meaning unnecessary spaces, comments, and verbose syntax are removed to reduce file size. Review build settings and rendered layouts, then suggest suitable minification tools or framework settings.
中文简介正在准备中。当前显示英语简介。
- Checking production CSS minification
- Adding minification to a build process
- Reviewing CSS output from PostCSS
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Review the loading order of CSS and JavaScript to address rendering delays and flashes of unstyled content. Suggest changes to the document head, script loading, and critical styles, while checking layouts across screen sizes and interaction states.
中文简介正在准备中。当前显示英语简介。
- Investigating flashes of unstyled content
- Reviewing CSS and JavaScript order in the document head
- Checking deferred scripts and critical styles
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新