CMS

Site

·

main

CMS hero background image

Invite

Publish

Collections

Fields

Plugins

Blog

Careers

Docs

Guides

Help

Startups

Use Cases

Articles

0

0

Categories

0

0

Add...

Title

Image

Category

Featured

How Perplexity launched their AI search brand site

AI

How DoorDash redesigned their marketing site

Enterprise

How NBA launched a global fan experience

Sports

How Dribbble rebuilt their community platform

Design

How Zapier ships landing pages 10x faster

SaaS

How Microsoft powers brand design at scale

Enterprise

How Huel grew their direct-to-consumer storefront

Consumer

How Mixpanel launched their new product site

SaaS

How Cal.com ships a world-class docs experience

Startup

How Loops builds email SaaS pages in days

SaaS

How Contra launched a freelancer marketplace

Startup

How Miro ships marketing pages without engineering

SaaS

Agent

Updates

Use

use-cases.csv

to create Use Case Articles and Categories collections. Populate fields and match each article to a category.

考え中...

I’ll create two CMS collections from the attached CSV.

Added 82 layers 44s

Done — I added two linked collections:

  1. Articles — 39 CSV rows imported.

  2. Categories — 10 rows added and linked to Articles as multi-select tags.

Changes

Undo

Articles

39 Items

Categories

10 Items

GPT 6 Sol

CMS

Site

·

main

CMS hero background image

Invite

Publish

Collections

Fields

Plugins

Blog

Careers

Docs

Guides

Help

Startups

Use Cases

Articles

0

0

Categories

0

0

Add...

Title

Image

Category

Featured

How Perplexity launched their AI search brand site

AI

How DoorDash redesigned their marketing site

Enterprise

How NBA launched a global fan experience

Sports

How Dribbble rebuilt their community platform

Design

How Zapier ships landing pages 10x faster

SaaS

How Microsoft powers brand design at scale

Enterprise

How Huel grew their direct-to-consumer storefront

Consumer

How Mixpanel launched their new product site

SaaS

How Cal.com ships a world-class docs experience

Startup

How Loops builds email SaaS pages in days

SaaS

How Contra launched a freelancer marketplace

Startup

How Miro ships marketing pages without engineering

SaaS

Agent

Updates

Use

use-cases.csv

to create Use Case Articles and Categories collections. Populate fields and match each article to a category.

考え中...

I’ll create two CMS collections from the attached CSV.

Added 82 layers 44s

Done — I added two linked collections:

  1. Articles — 39 CSV rows imported.

  2. Categories — 10 rows added and linked to Articles as multi-select tags.

Changes

Undo

Articles

39 Items

Categories

10 Items

GPT 6 Sol

CMS

Site

·

main

CMS hero background image

Invite

Publish

Collections

Fields

Plugins

Blog

Careers

Docs

Guides

Help

Startups

Use Cases

Articles

0

0

Categories

0

0

Add...

Title

Image

Category

Featured

How Perplexity launched their AI search brand site

AI

How DoorDash redesigned their marketing site

Enterprise

How NBA launched a global fan experience

Sports

How Dribbble rebuilt their community platform

Design

How Zapier ships landing pages 10x faster

SaaS

How Microsoft powers brand design at scale

Enterprise

How Huel grew their direct-to-consumer storefront

Consumer

How Mixpanel launched their new product site

SaaS

How Cal.com ships a world-class docs experience

Startup

How Loops builds email SaaS pages in days

SaaS

How Contra launched a freelancer marketplace

Startup

How Miro ships marketing pages without engineering

SaaS

Agent

Updates

Use

use-cases.csv

to create Use Case Articles and Categories collections. Populate fields and match each article to a category.

考え中...

I’ll create two CMS collections from the attached CSV.

Added 82 layers 44s

Done — I added two linked collections:

  1. Articles — 39 CSV rows imported.

  2. Categories — 10 rows added and linked to Articles as multi-select tags.

Changes

Undo

Articles

39 Items

Categories

10 Items

GPT 6 Sol

Framer CMS table showing article titles, company logos, category fields, and visibility toggles.

/

Quality

CMS check skill

Check collection items for unfinished content, inconsistent fields, broken references, and template issues. Get a prioritized report with clear fixes.

Copy skill

Copied

Copy skill

Copied

# CMS Check Review a Framer project’s CMS for unfinished content, inconsistencies, and problems in the pages that use it. Learn each collection’s pattern before judging individual items. ## Scope - Review all collections unless the user names specific ones. - Inspect each item’s status when available. Keep visible items, drafts, and items with unknown status distinct. Do not treat a visible setting as proof that an item is live on the published site. - For collections with 30 items or fewer, inspect every item. - For larger collections, scan all accessible items for suspicious field values. Closely inspect at least 15 items: five from the start, five from the middle, and five from the end of the current order, plus items flagged by the scan. State the actual coverage. - Inspect the collection lists and detail-page templates that use each collection when accessible. - If there are no CMS collections, report that and stop. ## Checks 1. Find placeholder text, test items, editorial notes, and substantially unfinished visible items. List unfinished drafts as optional cleanup unless they affect visible content or the user says they are intended for launch. 2. Compare similar items for meaningful inconsistencies in naming, capitalization, dates, categories, summaries, and field use. 3. Check fields connected to collection lists and detail pages. Before flagging an empty value, inspect the field’s default and whether the page uses a fallback or hides the element when the value is empty. 4. Look for item-specific content on a detail-page template that is static instead of connected to a CMS field. Flag it when it would show the wrong text or image across items. 5. Check collection-list filters, sort order, and limits for settings that exclude intended items or show the wrong items. Report the exact setting and affected items; do not assume every hidden item is an error. 6. Check references to other CMS items. Flag missing references or clearly wrong targets that make visible content incorrect or incomplete. 7. Check fields used for page titles and descriptions. Flag empty values when there is no suitable fallback. 8. Flag unfinished, misleading, or duplicate slugs for review when they may affect routing. If duplicate slugs cannot be checked, say so under Unverified. Do not suggest changing a URL solely for style. 9. Identify possibly repeated or outdated content as review candidates, not confirmed items to remove. Similar titles or a lack of visible links alone are insufficient evidence. ## Changes - Correct only clear typos and formatting inconsistencies when an established pattern makes the intended value unambiguous. - Do not invent facts or fill gaps with plausible content. - Do not delete items, change slugs, collection fields, references, visibility, draft status, filters, or templates unless the user asks. - Leave uncertain values unchanged and report the decision needed. ## Output Start with the collections reviewed, the number of items scanned and closely inspected in each, and a brief assessment. ## Needs attention Number each issue. Give the collection, item title and path when available, exact evidence, the affected page or list, and one specific fix or decision needed. Group items with the same issue, but name every affected item. ## Optional cleanup List unfinished drafts and possible repeated or outdated content here. Explain why each was flagged without calling it a confirmed problem. ## Fixed List each change with the collection, item, field, and before/after value. Omit this section if nothing changed. ## Unverified Name statuses, items, fields, page settings, or published pages that could not be checked. Distinguish project settings and CMS values from behavior confirmed on the published site. Do not create a finding solely because an optional field is empty. If no issues were found in the scope checked, say so and describe the coverage.

How to apply skills to your project
  1. Keep new pages consistent with your project’s typography, colors, spacing, and components.

    Skill copied

    # Design system

    Use this skill when you add pages or sections to a site that already has a look. You extend the system the team built. You don’t invent a new one.

    ## Before you start

    - Open the home page and two pages close to the new one.

    1. Copy the skill

    Use the Copy button above the skill to copy this skill’s instructions to your clipboard.

  2. /skills

    Turn these instructions into

    a reusable skill:

    GPT 6 Sol

    2. Add it in agent chat

    Type /skills in your agent chat and paste the skill, or add it in Settings / Skills.

  3. Use

    /design-system

    to build a new

    Careers page. Include a couple job openings and a form.

    GPT 6 Sol

    3. Use it in chat

    Type the skill’s command, such as /design-system, in your agent to use it.

  4. Title

    design-system

    Description

    Use components, styles, spacing, and layouts to create new

    Content

    Design system

    Use dark color scheme. Reuse existing styles and components; never invent new colors or text styles.


    Pages

    • Apply the Base layout template to every new page.

    • Set a meta title and meta description on every new page.

    • Sections fill the screen width (1fr) and contain an inner wrapper with maxWidth="1200px" that holds the content.


    Colors

    Container backgrounds: Color/Black.

    Text:

    • Primary headings: Color/White

    • Secondary/body text: Color/White 60

    Accent: Color/Red is the only accent. Use it very sparingly (one highlight per section at most).

    Borders and dividers: Color/Border Solid or Color/Border Transparent.

    Typography

    Always use these text styles, never inline type styles:

    • Set Text Balance to Yes for text layers.

    • Use sentence case; do not use all caps.

    • Do not use eyebrow text (small text above a heading).

    • In heroes, use Text/Body L for supporting text.

    • For every paragraph, adjust its text-box width to produce 50–75 characters per line, targeting 65. Round the width up to the nearest 5 or 10 pixels. If that width is wider than the parent container, set the text box to Fill. Verify at every breakpoint before finishing.

    • Text/H0: jumbo headings and hero treatments

    • Text/H1: blog post titles and secondary page titles

    • Text/H2, Text/H3, Text/H4, Text/H5, Text/H6: all other headings, in hierarchy order

    • Text/Body L: sub heads

    • Text/Body: main body text

    • Text/Body M: small supporting text

    • Text/Button: button labels only

    4. Edit your skill

    Open Settings / Skills whenever you want to make changes.

次のアイデアを、
かたちにしよう。

GPT 6 Sol

ポートフォリオをつくる

スタートアップのサイトをつくる

LPをつくる

企業ブログを始める

Framer UI showing Pages, Layers and Assets panels titles
Framer UI showing Pages, Layers and Assets panels titles