> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useartifact.app/llms.txt
> Use this file to discover all available pages before exploring further.

# What I’m building toward

export const EssayDrawing = ({kind}) => {
  const element = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    if (typeof IntersectionObserver === 'undefined') {
      setVisible(true);
      return;
    }
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setVisible(true);
        observer.disconnect();
      }
    }, {
      threshold: 0.45
    });
    if (element.current) observer.observe(element.current);
    return () => observer.disconnect();
  }, []);
  const descriptions = {
    versions: 'Two onboarding designs are shown on the left: a three-field form above a newer one-field form. Only the three-field design is connected to the browser on the right, which still shows three fields. The new design does not change that connection or the implementation.',
    feedback: 'Two paper studies fan apart. The earlier study has three outlined fields and an annotation clipped to its lower edge. The newer study has one field and no annotation. The annotation stays attached to the earlier study as the papers separate.'
  };
  return <figure ref={element} className={'artifact-essay-drawing artifact-essay-drawing-' + kind + ' not-prose'} data-visible={visible} role="img" aria-label={descriptions[kind]}>
      {kind === 'versions' && <svg viewBox="0 0 640 376" aria-hidden="true" focusable="false">
          {}
          <path data-part="implementation-link" className="artifact-essay-link" d="M220 98H264Q278 98 278 112V178Q278 192 292 192H336" />
          <circle cx="336" cy="192" r="3" className="artifact-essay-ink" />

          <g data-part="earlier-design" data-form="three-fields">
            <path className="artifact-essay-crop" d="M35 43V29H49M211 29H225V43M35 151V165H49M211 165H225V151" />
            <rect className="artifact-essay-paper" x="42" y="36" width="176" height="122" rx="2" />
            <path className="artifact-essay-heading" d="M65 56H119" />
            <rect className="artifact-essay-field" x="65" y="71" width="130" height="15" rx="3" />
            <rect className="artifact-essay-field" x="65" y="92" width="130" height="15" rx="3" />
            <rect className="artifact-essay-field" x="65" y="113" width="130" height="15" rx="3" />
            <rect className="artifact-essay-button" x="65" y="139" width="42" height="7" rx="2" />
          </g>

          <g data-part="implementation" data-form="three-fields">
            <rect className="artifact-essay-paper" x="340" y="82" width="256" height="216" rx="8" />
            <path className="artifact-essay-chrome" d="M340 106H596" />
            <circle className="artifact-essay-chrome" cx="353" cy="94" r="2" />
            <circle className="artifact-essay-chrome" cx="363" cy="94" r="2" />
            <circle className="artifact-essay-chrome" cx="373" cy="94" r="2" />
            <path className="artifact-essay-address" d="M405 94H531" />
            <path className="artifact-essay-heading" d="M372 133H446" />
            <rect className="artifact-essay-field" x="372" y="153" width="192" height="23" rx="4" />
            <rect className="artifact-essay-field" x="372" y="188" width="192" height="23" rx="4" />
            <rect className="artifact-essay-field" x="372" y="223" width="192" height="23" rx="4" />
            <rect className="artifact-essay-button" x="372" y="262" width="62" height="12" rx="3" />
          </g>

          <g data-part="alternative" data-form="one-field" className="artifact-essay-new-work">
            <path className="artifact-essay-crop" d="M35 235V221H49M211 221H225V235M35 343V357H49M211 357H225V343" />
            <rect className="artifact-essay-paper" x="42" y="228" width="176" height="122" rx="2" />
            <path className="artifact-essay-heading" d="M65 261H119" />
            <rect className="artifact-essay-field" x="65" y="282" width="130" height="19" rx="3" />
            <rect className="artifact-essay-button" x="65" y="316" width="42" height="9" rx="2" />
          </g>
        </svg>}

      {kind === 'feedback' && <div className="artifact-essay-folio" aria-hidden="true">
          <div className="artifact-essay-sheet-position artifact-essay-earlier" data-part="earlier-experience" data-form="three-fields">
            <div className="artifact-essay-sheet">
              <div className="artifact-essay-registration"><i /><i /></div>
              <div className="artifact-essay-impression"><i /><i /><i /></div>
              <div className="artifact-essay-edge-rule" />
            </div>
            {}
            <div className="artifact-essay-annotation" data-part="source-feedback">
              <div className="artifact-essay-annotation-paper">
                <div className="artifact-essay-quote"><i /><i /></div>
                <div className="artifact-essay-annotation-lines"><i /><i /><i /></div>
                <div className="artifact-essay-fold" />
              </div>
              <div className="artifact-essay-paperclip" />
            </div>
          </div>
          <div className="artifact-essay-sheet-position artifact-essay-revised" data-part="revised-experience" data-form="one-field">
            <div className="artifact-essay-sheet">
              <div className="artifact-essay-registration"><i /><i /></div>
              <div className="artifact-essay-impression artifact-essay-one-field"><i /></div>
              <div className="artifact-essay-edge-rule" />
            </div>
          </div>
        </div>}
    </figure>;
};

<div className="artifact-essay-byline">A note from Nabil · September 5, 2026</div>

<Note>
  **TL;DR**

  I’m building Artifact to make it clear what a product change affects: the design, the implementation, the feedback, and the next piece of work. That understanding should carry between tools and agent sessions without constant upkeep. This describes the direction, not finished capabilities.
</Note>

I’ve run into this with my own products: a design, a branch, and an agent session can each make sense on their own while their relationship becomes hard to follow. A shortcut in one session becomes an assumed requirement in the next. Over time, a product can move somewhere its owner never deliberately chose.

## One change, from design to feedback

Take an onboarding form with three fields. You explore a one-field design in Figma, but the browser still shows the original form.

<EssayDrawing kind="versions" />

Artifact should look for the actual choice in the material you choose to share, such as a review or an instruction to an agent. A newer frame doesn’t establish that you adopted it. If the choice was never recorded, that part needs your judgment.

Once you choose the one-field approach, Artifact should make the unfinished work clear: the implementation still needs updating and releasing.

After release, comments from people who used the three-field form still describe that earlier experience.

<EssayDrawing kind="feedback" />

A complaint about asking for too much information may need a fresh test. A concern about trust could still apply. The redesign alone doesn’t establish that either problem was solved.

You should still be able to return to the original design or try a third approach. The record should help you reconsider a choice, including why it changed, rather than enforce it.

## Useful without becoming another job

Maintaining those connections has to be mostly the product’s responsibility. Asking you to label every file and classify every conversation would recreate the burden Artifact is meant to remove.

You should be able to follow a claim to its source, see where it depends on an inference, and correct a mistaken connection without rebuilding the whole picture.

A missing decision that blocks current work may deserve your attention. An unused draft can wait. Every interruption and correction has to count against the effort saved.

The value should show up during ordinary work: reviewing an implementation with its intended design beside it, or starting an agent session with the relevant constraints available in that tool, without a separate setup ritual.

***

If this sounds familiar, you can [join the Artifact waitlist](https://useartifact.app/beta).
