菜单
Design and build Glide screens, components, forms, and actions. Create screens that are intuitive, data-dense, and serve user workflows. Use when creating or designing screens, choosing components, building forms, configuring navigation, or reviewing and improving screen usability.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Audit Glide apps for performance issues and optimization opportunities. Use when analyzing app performance, identifying bottlenecks in data structure or layout, or providing recommendations for improving app speed and user experience. Automatically triggered when user provides a Glide app URL for audit, including read-only support-mode URLs of the form https://go.glideapps.com/support/{uuid}. Can also produce an optional plain-language, customer-facing version of the report on request, for sharing directly with the customer who reported the issue.
Get detailed explanations of Glide features - computed columns, workflows, components, data modeling, AI features, and more
Use the Glide API for programmatic data operations - REST API v2 and @glideapps/tables npm package. Use when importing data, bulk operations, automating data sync, or building integrations with Glide tables.
Create computed columns in Glide - Math, If-Then-Else, Relations, Rollups, Lookups, Templates. Use when adding calculations, formulas, lookups, or linking tables with relations.
Design Glide data models - tables, columns, column types, and calculation architecture. Use when creating tables, designing data structures, choosing column types, or planning relationships.
**The primary skill for building Glide apps.** Covers the full workflow, agent coordination, and browser automation. Use when building, creating, or modifying any Glide app. Read this first for any Glide project.
| name | design |
| description | Design and build Glide screens, components, forms, and actions. Create screens that are intuitive, data-dense, and serve user workflows. Use when creating or designing screens, choosing components, building forms, configuring navigation, or reviewing and improving screen usability. |
Click the "+" button in the Navigation or Menu section of the Layout Editor.
| Screen Type | Description | Use Case |
|---|---|---|
| Screen from data | Collection screen linked to a table | Lists, directories |
| Custom screen | Blank screen to build freely | Dashboards, custom layouts |
| Form screen | Data entry form | Add/edit records |
Pre-built templates for common patterns:
Keep these in mind when building and reviewing screens:
When reviewing or building screens in the Layout Editor, always switch to Desktop preview unless specifically designing a mobile-only app.
Mobile preview is narrow and hides important layout issues:
To review full page layouts:
Always check:
Each tab in a Glide app has multiple screens that need to be designed. You must navigate to each screen in the Layout Editor to design it - they don't appear automatically.
In the Layout Editor:
Important: The component list in the left sidebar changes based on which screen you're viewing. Make sure you're on the correct screen before adding or configuring components.
Don't just design the collection screen and leave the rest as defaults:
Each screen type deserves attention. Users will interact with all of them.
When you create a "Screen from data", Glide adds generic default components. Delete these defaults and design the screen yourself using components appropriate for the data.
Why replace defaults:
How to replace:
Examples of better component choices:
| Data Type | Default | Better Choice |
|---|---|---|
| Employee with email/phone | Fields component | Contact component (tap-to-call/email buttons) |
| Address/location | Text field | Map component or Location component |
| Numeric KPIs | Fields component | Big Numbers component |
| Progress/completion | Number field | Progress bar component |
| Person with photo | Image + text | Profile title component |
| Project with banner | Image + text | Cover title component |
| Related items | Hidden or single field | Inline Collection showing all related records |
| Status field | Text | Headline with emoji from If-Then-Else column |
| Long description | Text field | Rich Text component |
| Multiple metrics | Multiple fields | Container with side-by-side Big Numbers |
Detail screen example - Employee:
Instead of default Fields component showing all columns:
This creates a polished, purposeful screen instead of a data dump.
This is one of the most important design decisions. The collection style determines how users interact with your data. Always evaluate whether the current style is optimal for the task.
| Style | When to Use |
|---|---|
| Card | Visual layout with images, photos, or rich metadata. Good for browsing, shows multiple fields per item |
| List | Compact and scannable. Shows 2-3 key fields. Best for simple data where users need to scan quickly |
| Table | Data-dense, columnar format. Excellent for comparing values across many rows (prices, dates, quantities) |
| Data Grid | Editable table. Like Table but allows inline editing of data |
| Checklist | For boolean/checkbox fields. Great for task lists and to-dos |
| Calendar | For date-based data. Shows events on a timeline or calendar grid |
| Kanban | For status/workflow data. Organize items by column (e.g., To Do → In Progress → Done) |
| Custom | Build your own layout for specialized use cases |
Ask yourself these questions:
When evaluating collection style:
Add color and visual interest using If-Then-Else computed columns to display status emojis. Users can scan status instantly.
Examples:
How to implement:
This adds instant visual scanning without taking up much space.
Use the Hero Icons experimental column to generate dynamic icons by name from the Hero Icons library. These render as images you can display anywhere.
How to use:
Combine with If-Then-Else for dynamic icons:
Examples:
Browse available icons at: https://heroicons.com
Display multi-relation columns as inline collections on detail screens to improve browsability.
Example: Office detail screen
This pattern works great for:
How to implement:
This lets users drill down into related data naturally, making the app feel more connected and explorable.
A subtle detail that makes apps look more polished: configure formatting on number and math columns.
Settings to check:
Examples:
How to configure:
This small touch makes data instantly readable and professional.
Collection screens (the top level of most tabs):
Detail screens (showing one item):
Edit/Add screens (data entry):
Glide has a beautiful, diverse component system. Effective screens use it well:
Component Variety: Don't rely on just Fields components. Mix in:
Screen Density: A well-designed screen typically has 5-15 components. This provides:
Multi-Column Layouts: Use Containers to create sophisticated layouts:
Table Design: Tables are data-dense and beautiful when designed thoughtfully:
Add nuance and interest:
Maximize the component system:
Example: A detail screen showing a project might include:
This approach transforms a basic data display into an engaging, useful interface that users want to interact with.
| Component | Description |
|---|---|
| Custom (Beta) | AI-powered custom component |
| Component | Description |
|---|---|
| Simple | Basic title with text |
| Image | Title with image |
| Profile | User profile header |
| Cover | Full-width cover image |
| Component | Description |
|---|---|
| Card | Card collection |
| List | List collection |
| Table | Table collection |
| Data Grid | Compact grid collection |
| Checklist | Checkable list |
| Calendar | Calendar view |
| Kanban | Kanban board |
| Custom | Custom collection |
| Comments | Comment thread |
| Chat | Chat interface |
| Component | Description |
|---|---|
| Container | Group components together |
| Separator | Visual divider line |
| Tabs Container (Beta) | Tabbed content |
| Spacer | Empty space |
| Component | Description |
|---|---|
| Text | Display text |
| Notes | Note-taking component |
| Rich Text | Formatted text display |
| Hint | Helper text |
| Headline | Large heading |
| Component | Description |
|---|---|
| Fields | Display data fields |
| Location | Address/location display |
| Image | Image display |
| Video | Video player |
| Big Numbers | Large metric display |
| Progress | Progress bar |
| Audio | Audio player |
| Audio Recorder | Record audio |
| Map | Interactive map |
| Bar Chart | Bar graph |
| Line Chart | Line graph |
| Chart (Beta) | Flexible chart |
| Radial chart | Pie/donut chart |
| Component | Description |
|---|---|
| Button Block | Button with block styling |
| Link | Clickable link |
| Action Row | Row with action |
| Rating | Star rating |
| Button | Standard button |
| Voice Transcription (Beta) | Voice input |
| Contact | Contact buttons |
| Component | Description |
|---|---|
| Contact Form | Pre-built contact form |
| Form Container | Container for form fields |
| Component | Description |
|---|---|
| Text Entry | Text input field |
| Date Time | Date and time picker |
| Number Entry | Number input |
| Phone Entry | Phone number input |
| Email Entry | Email input |
| Switch | Toggle switch |
| Image Picker | Image upload |
| File Picker | File upload |
| Date | Date picker |
| Choice | Dropdown/selection |
| Checkbox | Checkbox field |
| Component | Description |
|---|---|
| Web Embed (Explorer) | Embed external content |
| Breadcrumbs | Navigation breadcrumbs |
| Scanner (Business) | QR/barcode scanner |
| Signature | Signature capture |
| Spinner | Loading indicator |
| Tabs (Beta) | Tab navigation |
When a component is selected, the right panel shows:
Components can trigger actions on tap/click.
Critical concept: When you add multiple actions to a component, the order in the actions list determines the visual order of buttons in the UI.
The rule: Top action in the list = Leftmost button in the UI
Example:
Actions list order: UI display order:
1. Edit → [Edit] [Email Info] (Edit is leftmost)
2. Email Info
Actions list order: UI display order:
1. Email Info → [Email Info] [Edit] (Email Info is leftmost)
2. Edit
To reorder actions:
To make an action the primary button:
Common use case: Remove the default "Edit" action if you don't want users to edit on that screen, or move it below your custom actions to make your actions more prominent.
Control when components appear:
Important: Visibility conditions are NOT security features. They only hide UI elements - the data is still downloaded. Use Row Owners for data security.
Example conditions: