Thème
Se connecter Essayer
NouveauServeur MCP intégré

Dites-le.
Votre agent le maquette.

L’outil de design où votre équipe et vos agents travaillent sur le même board. Du vrai HTML + Tailwind, en multijoueur, avec un serveur MCP intégré.

Essayer sans inscription Connecter mon agent
claude mcp add --transport http saymock https://app.saymock.com/mcp --header "Authorization: Bearer smk_…"
Vous Crée un onboarding mobile en 3 écrans pour une app de course à pied.
Bienvenue
Courez à votre rythme

Un plan qui s’adapte à vos sorties de la semaine.

Continuer
Objectif
Votre objectif ? 5 km 10 km Semi-marathon Continuer
C’est parti
Premier footing
Mardi5 kmAllure 6:10 /km
Démarrer
Claude vérifie la mise en page

Votre agent, votre compte : saymock n’appelle aucun modèle d’IA. Branchez Claude Code ou tout client MCP.

Comment ça marche

Une phrase, des écrans, puis on affine ensemble

  1. 01

    Branchez votre agent

    Une commande ajoute saymock à Claude Code ou à tout client MCP. L’agent agit avec vos droits, dans votre workspace, et peut lire votre code.

  2. 02

    Décrivez l’écran

    L’agent crée des frames en HTML + Tailwind, regarde le rendu en capture et corrige les défauts de mise en page avant de vous rendre la main.

  3. 03

    Affinez ensemble

    Modifiez à la main pendant qu’il travaille. Épinglez un commentaire avec @claude : il reprend l’élément, vérifie et répond dans le fil.

Agents

Vos agents au tableau

Ils apparaissent dans la présence comme un collègue, avec leur propre couleur. Leurs modifications sont surlignées, s’annulent séparément des vôtres, et chaque demande devient une tâche suivie dans le fil.

Kestrel / Onboarding TL Présenter Partager
Calques ⌥1
Semaine
Bonjour, Léa
Séance du jour
Programme
Bouton démarrerClaude
Séance en cours
Récap
iPhone 15 · Semaine
9:41100 %

Mardi 5 novembre

Bonjour, Léa

Séance du jourFooting 5 kmAllure 6:10 /km · 31 min
  • Mer. Repos
  • Jeu. Fractionné 8 × 400 m
  • Sam. Sortie longue 14 km
Démarrer la séance 358 × 48
Claude modifie
Tristan
TTristan · 2 min

@claude passe le bouton en pleine largeur et vérifie à 390 px.

Claude · à l’instant

Fait : w-full ajouté, mise en page vérifiée à 390 px, aucun débordement.

DesignPrototypeHTML
Mise en page
W358
H48
X16
Y772
Classes
w-fullh-12rounded-xlbg-gray-900text-whitefont-semiboldmt-auto
Remplissage
#111827 gray-900
Mise en page OK · 0 problème

Les couleurs des écrans restent celles de vos designs : seule l’interface autour prend celles de saymock.

Fonctionnalités

Un vrai outil de design, pas un générateur d’images

HTML + Tailwind natif

Ce que vous voyez est du code : flex, grid, Tailwind v4, icônes Lucide. Copiez le HTML d’un écran dans votre projet.

Commentaires → tâches

Mentionnez @claude sur un élément : le fil devient une tâche, que votre agent traite depuis sa boîte de réception.

Vérification de mise en page

Débordements, éléments décentrés de quelques pixels, éléments vides : l’audit les signale à l’agent comme à vous.

Multijoueur en temps réel

Curseurs, sélections et présence pour toute l’équipe, agents compris. Chacun annule ses propres modifications.

Prototypes jouables

Reliez les écrans avec data-goto, choisissez la transition, présentez-les dans un cadre d’appareil.

Partage par lien

Lecture, commentaire ou édition, avec expiration et révocation. Vos invités n’ont pas besoin de compte.

Développeurs

Le format que votre agent connaît le mieux

Pas de coordonnées à calculer ni de format propriétaire : votre agent lit et écrit du HTML avec des classes Tailwind. Les éléments répétés s’écrivent une fois avec un template, et chaque élément garde son identité d’une réécriture à l’autre.

  1. Créez un jeton dans Settings → Access tokens.
  2. Ajoutez le serveur à Claude Code :
    claude mcp add --transport http saymock https://app.saymock.com/mcp --header "Authorization: Bearer smk_…"
  3. Demandez un écran. Pour traiter les commentaires, lancez /saymock:inbox.

Outils MCP : create_frameedit_htmlupdate_nodesget_htmlget_screenshotcheck_layoutlist_tasksreply_comment

Tarif Pro · HTML
<div data-id="k2f9" class="flex flex-col gap-3 rounded-2xl bg-white p-6 shadow-lg">
  <h2 class="text-lg font-semibold">Pro</h2>
  <ul class="space-y-2">
    <template data-each="features">
      <li class="flex gap-2">
        <i data-lucide="check" class="size-4"></i>{{.}}
      </li>
    </template>
  </ul>
  <button data-goto="checkout" class="rounded-xl bg-zinc-900 py-3 text-white">
    Choisir
  </button>
</div>
data-id conserve les commentaires et les sélections · data-each répète un élément · data-goto relie les écrans du prototype

FAQ

Questions fréquentes

Faut-il payer une IA en plus ?

saymock n’appelle aucun modèle. Vous branchez votre propre agent, comme Claude Code : il travaille avec votre compte et peut lire votre code pour concevoir des écrans fidèles à votre produit.

Quels agents sont compatibles ?

Tout client qui parle MCP en Streamable HTTP. Un jeton d’accès personnel relie l’agent à votre compte et à votre workspace.

Mes designs sont-ils du vrai code ?

Oui. Chaque écran est du HTML avec des classes Tailwind v4, sans script. Copiez-le dans votre projet, ou demandez à votre agent de l’implémenter dans votre stack.

Puis-je travailler sans agent ?

Oui. L’éditeur se suffit à lui-même : frames et appareils, inspecteur Tailwind, calques, prototypes, commentaires et partage.

Qui voit mes fichiers ?

Les membres de votre workspace, et les personnes à qui vous envoyez un lien de partage, avec le rôle que vous avez choisi : lecture, commentaire ou édition.

Dites-le.
Votre agent le maquette.

Essayer maintenant